Ember action觸發(fā)變化

組件就像一個相對獨立的盒子。在前面的文章中介紹過組件是怎么通過屬性傳遞參數(shù)，并且這個屬性值你可以在模板或者js代碼中獲取。

但是到目前為止還沒介紹過子組件從父組件中獲取數(shù)組，在Ember應用中組件之間的通信是通過actions實現(xiàn)的。

跟著下面的步驟來，創(chuàng)建一個組件之間通信的示例。

1，創(chuàng)建組件

創(chuàng)建組件的方法不用我多說，直接使用Ember CLI命令創(chuàng)建即可。

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

為了測試方便多增加了一個路由。

下面是組件user-profile的定義，調(diào)用組件button-with-confirmation，那么此時user-profile作為父組件，button-with-confirmation作為子組件：

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

2，在組件類中添加action

要想action能執(zhí)行需要作如下兩步：

• 在父組件中定義好需要處理的動作（action）。在這個例子中父組件的動作是要刪除用戶賬號并發(fā)送一個提示信息到另一個組件。
• 在子組件中，判斷發(fā)生什么事件并發(fā)出通知信息。在這個例子中當用戶點擊“確認”按鈕之后觸發(fā)一個外部的動作（刪除賬戶或者發(fā)送提示信息）。

下面是實現(xiàn)代碼：

實現(xiàn)父組件動作（action）

在父組件中，定義好當用戶點擊“確認”之后觸發(fā)的動作。在這個例子中的動作（action）是先找出用戶賬號再刪除。

在Ember應用中，每個組件都有一個名為actions的屬性。這個屬性值是函數(shù)，是可以被用戶或者子組件執(zhí)行的函數(shù)。

//  app/components/user-profile.js


import Ember from 'ember';


export default Ember.Component.extend({
    actions: {
        userDidDeleteAccount: function() {
            console.log(“userDidDeleteAccount…”);
        }
    }
});

現(xiàn)在已經(jīng)實現(xiàn)了父組件邏輯，但是并沒有告訴Ember這個動作什么時候觸發(fā)，下一步將實現(xiàn)這個功能。

實現(xiàn)子組件動作（action）

這一步我們將實現(xiàn)當用戶點擊“確定”之后觸發(fā)事件的邏輯。

//  app/components/button-with-confirmation.js


import Ember from 'ember';


export default Ember.Component.extend({
    tagName: 'button',
    click: function() {
        if (confirm(this.get('text'))) {
            // 在這里獲取父組件的事件（數(shù)據(jù)）并觸發(fā)
        }
    }
});

3，傳遞action到組件中

現(xiàn)在我們在user-profile組件中使用onConfirm()方法觸發(fā)組件button-with-confirmation類中的userDidDeleteAccount事件。

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

這段代碼的意思是告訴父組件，userDidDeleteAccount方法會通過onConfirm方法執(zhí)行。

現(xiàn)在你可以在子組件中使用onConfirm方法執(zhí)行父組件的動作。

//  app/components/button-with-confirmation.js


import Ember from 'ember';


export default Ember.Component.extend({
    tagName: 'button',
    click: function() {
        if (confirm(this.get('text'))) {
            // 在父組件中觸發(fā)動作
            this.get('onConfirm')();
        }
    }
});

this.gete(“onConfirm”)從父組件返回一個值onConfirm，然后與()組合成了一個個方法onConfirm()。

在模板button-with-confirmation-route.hbs中調(diào)用組件。

{{user-profile}}

點擊這個button，會觸發(fā)事件。彈出對話框。再點擊“確認”后執(zhí)行方法userDidDeleteAccount，可以看到瀏覽器控制臺輸出了userDidDeleteAccount…，未點擊“確認”前或者點擊“取消”不會輸出這個信息，說明不執(zhí)行這個方法userDidDeleteAccount。

像普通屬性，actions可以組件的一個屬性，唯一的區(qū)別是，屬性設置為一個函數(shù)，它知道如何觸發(fā)的行為。

在組件的actions屬性中定義的方法，允許你決定怎么去處理一個事件，有助于模塊化，提高組件重用率。

到此，組件這一章節(jié)的內(nèi)容全部介紹完畢了，不知道你看懂了多少？如果有疑問請給我留言一起交流學習，獲取是直接去官網(wǎng)學習官方教程。

博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大?。?，如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力??！