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

原创
2016/01/26 17:13
阅读数 1K

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

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

展开阅读全文
加载中

作者的其它热门文章

打赏
1
0 收藏
分享
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部