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

摘要: 很多开发者对于sendAction方法的使用理解不清晰，本文结合示例为读者介绍怎么使用sendAction方法在组件component与控制器controller、路由route之间通信，以及可能出现的陷阱。 更多有关Ember.js陷阱的介绍请联系 Emberfest 2014 Presentation。

原文地址：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的不同点：

在组件

component

中使用

sendAction

方法在控制器

controller

、路由

route

中使用

send

方法。

在组件

component

中调用未定义的

action

行为不会报错，但是在控制器、路由中调用未定义的

action

方法会出现异常错误。

组件中调用

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获取是设置选中状态。
下面三个文件是一个完整项目中使用上述特性的示例：

调用组件的模板

组件类

控制器

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