Ember.js Getting Started Guide--action triggering changes

the component is like a relatively separate box. The previous article describes how a component passes a parameter through a property, and this property value can be obtained in a template or JS code.

but so far, the subcomponents have not been introduced to get the array from the parent component, communication between components in an Ember application is implemented through actions .

follow the steps below to create an example of communication between components.

1, create components

How to create a component you don't have to say it, just use it. Ember CLI command creation.

Ember G component Button-with-confirmationember G component User-profileember G Route Button-with-confirmation-route

To test the convenience of adding a route more.

here is the definition of the component User-profile, calling the component Button-with-confirmation, then User-profile as the parent component, Button-with-confirmation as sub-component:

<!---App/temlates/components/user-profile.hbs {button-with-confirmation text= "Click OK to delete your Accoun T "}}

2, adding in the Component classAction

There are two steps you need to take to get action done:

1. define the action (action) that needs to be handled in the parent component. In this example, the parent component's action is to delete the user account and send a message to the other component.

2. in the subassembly, determine what event occurred and send a notification message. In this example, when the user clicks the " Confirm " button, an external action is triggered (deleting the account or sending a message).

Here is the implementation code:

implements the parent component action (Action)

in the parent component, define the action that is triggered when the user clicks confirm . The action in this exampleis to find the user account and then delete it.

in the in Ember applications, each component has a property named actions . This property value is a function, which is a function that can be executed by the user or subcomponent.

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 does not tell Ember When this action is triggered, the next step is to implement this function.

Implement subassembly actions (Action)

In This step we will implement the logic that triggers the 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.G ET (' text '))) {//Get the parent component's event (data) and Trigger}}) here;

3, passingActioninto the component

Now we use the Onconfirm () method in the User-profile component to trigger the component in the Button-with-confirmation class. Userdiddeleteaccount event.

<!---App/temlates/components/user-profile.hbs {#button-with-confirmation text= "Click OK to delete your Accou NT "onconfirm= (Action ' Userdiddeleteaccount ')}}} execution Userdiddeleteaccount method {{/button-with-confirmation}}

The meaning of this code is to tell the parent component thatthe ' Userdiddeleteaccount ' method will be executed by the Onconfirm method.

       Now you can use Onconfirm

//  app/components/ button-with-confirmation.js import ember from  ' Ember '; export default  Ember.Component.extend ({       tagname:  ' button ',        click: function ()  {               if  (Confirm (This.get (' text)))  {                      //  trigger an action in the parent component                       this.get (' onconfirm ') ();               }       }); 

This.gete ("onconfirm") returns a value of "onconfirm" from the parent component, which is then combined with "()" to form a method onconfirm ().

the component is called in the template Button-with-confirmation-route.hbs .

<!--App/temlates/button-with-confirmation-route.hbs-to {user-profile}}

Finally, the result of the operation:

Clicking on this buttonwill trigger the event. The dialog box pops up. Then click " confirm " after the execution method Userdiddeleteaccount, you can see the browser console output "Userdiddeleteaccount ...", not clicked " confirm " or " cancel " will not output this message, indicating that this method is not performed Userdiddeleteaccount.

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

The method defined in the actions property of the component allows you to decide how to handle an event that helps to modularize and increase the component reuse rate.

Here , the contents of this chapter of the component are all finished, do not know how much you read? If you have any questions please send me a message to exchange learning, access is to go directly to the official website to learn a formal tutorial .

Ember.js Getting Started Guide--action triggering changes