Ember.js的組件如何使用sendAction與控制器、路由通訊

原文地址：http://120.24.90.140:2368/communicating-with-ember-js-components-using-sendaction/

組件和sendAction方法

不少開發者對於sendAction方法的使用理解不清晰，本文結合示例爲讀者介紹怎麼使用sendAction方法在組件component與控制器controller、路由route之間通訊，以及可能出現的陷阱。 更多有關Ember.js陷阱的介紹請聯繫 Emberfest 2014 Presentation。

下面列出在組件component中使用action與在控制器controller、路由route中使用action的不一樣點：

1. 在組件component中使用sendAction方法在控制器controller、路由route中使用send方法。
2. 在組件component中調用未定義的action行爲不會報錯，可是在控制器、路由中調用未定義的action方法會出現異常錯誤。
3. 組件中調用sendAction的做用是把行爲經過調用的模板發送到控制器、路由中處理，而不是直接在組件類中處理（下文會有例子介紹）。

示例 {{data-picker}}

假設有一個組件{{date-picker}}，用於選擇日期。因爲這是一個組件，在調用組件的模板index.hbs對應的控制器index.js沒法獲取到選擇的時間。 如何才能把用戶選擇的日期輸入發送到控制器中呢？你能夠參考下面的代碼實現：

{{! index.hbs}}
選擇生日：{{data-picker pickedDate="setBirthday"}}

當用戶選擇日期，首先會觸發組件類裏的定義的action方法，好比下面的代碼：

export default Ember.Component.extend({
	actions: {
		pickedDate: function(params) {
			//  發送到控制器中的setBirthday方法，
			this.sendAction("setBirthday", params);
		}
	}
}); 

// 或者寫成下面的形式
export default Ember.Component.extend({
	//selectedDate: null,
	click: function() {
		var date = '';  //選擇的日期
		// pickedDate必須與模板中設置的參數名一致
		this.sendAction("pickedDate", date);	
	}
});

如上代碼調用以後，用戶選擇日期這個行爲會發送到控制器執行，能夠在控制器中獲取用戶選擇的日期數據。

export default Ember.Controller.extend({
	actions: {
		// 參數date就是在組件類傳遞過來的參數
		setBirthday: function(date) {
			//  處理date的邏輯
			this.set("userBirthday", date);
		}
	}
});

上述三個文件的調用能夠用下圖來表示更加準確：

這種狀況常常會在設置某個狀態的時候用到，好比須要根據某個標記顯示、隱藏div獲取是設置選中狀態。 下面三個文件是一個完整項目中使用上述特性的示例：

1. 調用組件的模板
2. 組件類
3. 控制器

關於這個特性更多介紹請看官方文檔介紹。