Ember.js的组件如何使用sendAction与控制器、路由通信

2019独角兽企业重金招聘Python工程师标准>>>

原文地址：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. 控制器

关于这个特性更多介绍请看官方文档介绍。

转载于:https://my.oschina.net/ubuntuvim/blog/609950