Ember action triggers a change

Components are like a relatively separate box. The previous article described how components pass parameters through properties, and this property value can be obtained in templates or js code.

But so far there has been no introduction to sub-components getting arrays from parent components, and communication between components in Ember applications actions through actions.

Follow these steps to create an example of communication between components.

1, create a component

The way to create components doesn't take me much, just create them using the Ember CLI command.

ember g component button-with-confirmation
ember g component user-profile
ember g route button-with-confirmation-route

An more route was added for testing convenience.

Here's the definition of the component user-profile calling the button-with-confirmation user-profile as the parent component, button-with-confirmation as the child component:

{{button-with-confirmation text="Click OK to delete your account"}}

2, add action to the component class

There action steps you need to take to be able to perform:

• Define the action that needs to be processed in the parent component. In this example, the parent component's action is to delete the user account and send a prompt message to another component.
• In the sub-components, determine what happened and notify the information. In this example, an external action (delete the account or send a prompt message) is triggered when the user clicks the "Confirm" button.

Here's the implementation code:

Implementing parent component action

In the parent component, define the action that is triggered when the user clicks Confirm. The action in this example action find the user account before deleting it.

In an Ember app, each component has a property actions This property value is a function, a function that can be executed by a user or sub-component.

//  app/components/user-profile.js
import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        userDidDeleteAccount: function() {
            console.log(“userDidDeleteAccount…”);
        }
    }
});

The parent component logic is now implemented, but ember is not told when this action will be triggered and the next step will be to implement this function.

Implement sub-component action

In this step we will implement the logic of triggering an event when the user clicks OK.

//  app/components/button-with-confirmation.js
import Ember from 'ember';
export default Ember.Component.extend({
    tagName: 'button',
    click: function() {
        if (confirm(this.get('text'))) {
            // 在这里获取父组件的事件（数据）并触发
        }
    }
});

3, pass action into the component

Now we use the onConfirm() in the user-profile component to trigger the userDidDeleteAccount event in the component button-with-confirmation class.

{{#button-with-confirmation text="Click OK to delete your account" onConfirm=(action 'userDidDeleteAccount')}}
执行userDidDeleteAccount方法
{{/button-with-confirmation}}

This code means telling the parent component that userDidDeleteAccount is executed onConfirm method.

Now you can use the onConfirm perform the actions of the parent component.

//  app/components/button-with-confirmation.js
import Ember from 'ember';
export default Ember.Component.extend({
    tagName: 'button',
    click: function() {
        if (confirm(this.get('text'))) {
            // 在父组件中触发动作
            this.get('onConfirm')();
        }
    }
});

this.gete(“onConfirm”) a onConfirm and then combines it with () onConfirm()

The component is button-with-confirmation-route.hbs

{{user-profile}}

Clicking button triggers an event. P op up the dialog box. Click "Confirm" after the execution method userDidDeleteAccount you can see that the browser console output userDidDeleteAccount..." userDidDeleteAccount

Like normal properties, actions be a property of a component, the only difference being that the property is set to a function that knows how to trigger the behavior.

The methods actions in the component's action properties allow you to decide how to handle an event, helping to modularize and increase component reuse.

At this end, the contents of this chapter of the component are all introduced, do not know how much you understand? If in doubt please leave me a message to exchange learning, get is directly to the official website to learn the official tutorial.

The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!