Ember action觸發(fā)變化

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

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

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

1，創(chuàng)建組件

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

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

為了測(cè)試方便多增加了一個(gè)路由。

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

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

2，在組件類(lèi)中添加action

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

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

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

實(shí)現(xiàn)父組件動(dòng)作（action）

在父組件中，定義好當(dāng)用戶點(diǎn)擊“確認(rèn)”之后觸發(fā)的動(dòng)作。在這個(gè)例子中的動(dòng)作（action）是先找出用戶賬號(hào)再刪除。

在Ember應(yīng)用中，每個(gè)組件都有一個(gè)名為actions的屬性。這個(gè)屬性值是函數(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)實(shí)現(xiàn)了父組件邏輯，但是并沒(méi)有告訴Ember這個(gè)動(dòng)作什么時(shí)候觸發(fā)，下一步將實(shí)現(xiàn)這個(gè)功能。

實(shí)現(xiàn)子組件動(dòng)作（action）

這一步我們將實(shí)現(xiàn)當(dāng)用戶點(diǎ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)在我們?cè)?code>user-profile組件中使用onConfirm()方法觸發(fā)組件button-with-confirmation類(lèi)中的userDidDeleteAccount事件。

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

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

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

//  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ā)動(dòng)作
            this.get('onConfirm')();
        }
    }
});

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

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

{{user-profile}}

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

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

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

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

博文完整代碼放在Github（博文經(jīng)過(guò)多次修改，博文上的代碼與github代碼可能有出入，不過(guò)影響不大?。?，如果你覺(jué)得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力??！