action助手所现实的功能与javascript里的事件是相似的,都是通过用户点击元素触发定义在元素上的事件。Ember的action助手还允许你传递参数到对应的controllercomponent类,在controller或者component上处理事件的逻辑。
准备工作,我们使用Ember CLI命令创建一个名称为myactioncontroller和同名的route,如果你不知道怎么使用Ember CLI请看前面的文章Ember.js 入门指南之七第一章对象模型小结,这篇文件讲解了怎么使用Ember CLI构建一个简单的Ember项目。

1,action使用实例

1,在route层增加测试数据

1
2
3
4
5
6
7
8
9
10
11
//  apap/routes/myaction.js


import Ember from 'ember';

export default Ember.Route.extend({
// 返回测试数据到页面
model: function() {
return { id:1, title: 'ACTIONS', body: "Your app will often need a way to let users interact with controls that change application state. For example, imagine that you have a template that shows a blog title, and supports expanding the post to show the body.If you add the {{action}} helper to an HTML element, when a user clicks the element, the named event will be sent to the template's corresponding component or controller." };
}
});

重写model回调,直接返回一个对象数据。

2,编写action模板

1
2
3
4
5
6
7
8
9
<!--  //  app/templates/myaction.hbs  -->

<!-- showDetailInfo这个事件的名字必须要跟controller里的方法名字一致 -->
<h2 {{action ' showDetailInfo '}} style="cursor: pointer;">{{model.title}}</h2>
{{#if isShowingBody}}
<p>
{{model.body}}
</p>
{{/if}}

默认下只显示文章的标题,当用户点击标题的时候触发事件toggleBody显示文章的详细信息。

3,编写action的controller实现模板所需要的逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/controllers/myaction.js

import Ember from 'ember';

export default Ember.Controller.extend({

// 控制页面文章详细内容是否显示
isShowingBody: false,
actions: {
showDetailInfo: function() {
// toggleProperty方法直接把isShowingBody设置为相反值
// toggleProperty方法详情:http://devdocs.io/ember/classes/ember.observable#method_toggleProperty
this.toggleProperty('isShowingBody');
}
}
});

对于controller的处理逻辑你还可以直接编写触发的判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
actions: {
showDetailInfo: function() {
// toggleProperty方法直接把isShowingBody设置为相反值
// toggleProperty方法详情:http://devdocs.io/ember/classes/ember.observable#method_toggleProperty
// this.toggleProperty('isShowingBody');

// 变量作用域问题
var isShowingBody = this.get('isShowingBody');
if (isShowingBody) {
this.set('isShowingBody', false);
} else {
this.set('isShowingBody', true);
}
}
}

如果你不使用toggleProperty方法改变isShowingBody的值,你也可用直接编写代码修改它的值。
最后执行URL:http://localhost:4200/myaction,默认情况下页面上是不显示文章的详细信息的,当你点击标题则会触发事件,显示详细信息,下面2个图片分别展示的是默认情况和点击标题之后。当我们再次点击标题,详细内容又变为隐藏。

图片1

图片2

通过上述的小例子可以看到action助手使用起来也是非常简单的。主要注意下模板上的action所指定的事件名称要与controller里的方法名字一致。

2,action参数

就像调用javascript的方法一样,你也可以为action助手增加必要的参数。只要在action名字后面接上你的参数即可。

1
2
3
4
<p>
<!-- model直接作为参数传递到controller -->
<button {{action 'hitMe' model}}>点击我吧</button>
</p>

对应的在controller增加处理的方法selected。在此方法内打印获取到的参数值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// app/controllers/myaction.js

import Ember from 'ember';

export default Ember.Controller.extend({

// 控制页面文章详细内容是否显示
isShowingBody: false,
actions: {
showDetailInfo: function() {
// ⋯⋯同上面的例子
},
hitMe: function(model) { // 参数的名字可以任意
console.log('The title is ' + model.title);
console.log('The body is ' + model.body);
}
}
});

Ember规定我们编写的动作处理的方法都是放在actions这个哈希内。哈希的键就是方法名。在controller方法上的参数名不要求与模板上传递的名字一致,你可以任意定义。比如方法hitMe的参数model你也可以使用m作为hitMe方法的参数。

当用户点击按钮“点击我吧”就会触发方法hitMe,然后执行controller的同名方法,最后你可以在浏览器的console下看到如下的打印信息。

run result

看到这些打印结果很好的说明了获取的参数是正确的。

3,指定action触发的事件类型

默认情况下action触发的是click事件,你可以指定其他事件,比如键盘按下事件keypress。事件的名字与javascript提供的名字是相似的,唯一不同的是Ember所识别是事件名字如果是由不同单词组成的需要用中划线分隔,比如keypress事件在Ember模板中你需要写成key-press
注意:你指定事件的时候要把事件的名字作为on的属性。比如on='key-press'

1
<a href="#/myaction" {{action 'triggerMe' on="mouse-over"}}>鼠标移到我身上触发</a>

1
2
3
triggerMe: function() {
console.log('触发mouseover事件。。。。');
}

4,指定action触发事件的辅助按键

甚至你还可以指定按下键盘某个键后点击才触发action所指定的事件,比如按下键盘的Alt再点击才会触发事件。使用allowedkeys属性指定按下的是那个键。

1
2
<br><br>
<button {{action 'pressALTKeyTiggerMe' allowedkeys='alt'}}>按下Alt点击触发我</button>

5,禁止标签默认行为

action助手内使用属性preventDefault=false可以禁止标签的默认行为,比如下面的a标签,如果action助手内没有定义这个属性那么你点击链接时只会执行执行的action动作,a标签默认的行为不会被触发。

1
2
3
<a href="http://www.baidu.com" {{action "showDetailInfo" preventDefault=false}}>
点我跳转
</a>

6,可以把触发的事件作为参数传递到controller

handlebarsaction助手真的是非常强大,你甚至可以把触发的事件作为action的参数直接传递到controller。不过你需要把action助手放在javascript的事件里。比如下面的代码当失去焦点时触发,并且通过action指定的dandDidChange把触发的事件blur传递到controller

1
2
<label>失去焦点时候触发</label>
<input type="text" value={{textValue}} onblur={{action 'bandDidChange'}} />

1
2
3
4
5
6
7
8
9
10
11
12
13
// app/controllers/myaction.js

import Ember from 'ember';

export default Ember.Controller.extend({

actions: {
bandDidChange: function(event) {
console.log('event = ' + event);
}
}

});

result

从控制台输出结果看出来event的值是一个对象并且是一个focus事件。
但是如果你在action助手内增加一个属性value='target.value'(别写错只能是target.value)之后,传递到controller的则是输入框本身的内容。不再是事件对象本身。

1
<input type="text" value={{textValue}} onblur={{action 'bandDidChange' value="target.value"}} />

result

这个比较有意思,实现的功能与前面的参数传递类似的。

7,action助手用在非点击元素上

`action`助手可以用在任何的`DOM`元素上,不仅仅是用在能点击的元素上(比如`a`、`button`),但是用在其他非点击的元素上默认情况下是不可用的,也就是说点击也是无效的。比如用在`div`标签上,但是你点击`div`元素是没有反应的。如果你需要让`div`元素也能触发单击事件你需要给元素添加一个CSS类'cursor:pointer;`。

总的来说Ember的action助手与普通的javascript的事件是差不多的。用法基本上与javascript的事件相似。



博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能又出入,不过影响不大!),如果你觉得博文对你有点用,请在github项目上给我点个star吧。您的肯定对我来说是最大的动力!!