本系列文章全部从（）迁移过来，欢迎访问原网站。

    action助手所现实的功能与javascript里的事件是相似的，都是通过用户点击元素触发定义在元素上的事件。Ember的action助手还允许你传递参数到对应的controller、component类，在controller或者component上处理事件的逻辑。

准备工作，我们使用Ember CLI命令创建一个名称为myaction的controller和同名的route，如果你不知道怎么使用Ember CLI请看前面的文章《

》，这篇文件讲解了怎么使用Ember CLI构建一个简单的Ember项目。

1，action使用实例

1，在route层增加测试数据

//    app/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模板

     
    
    
     {
    {model.title}}{
    {#if isShowingBody}}
     
{
    {model.body}}
{
    {/if}}
    

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

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

// 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的处理逻辑你还可以直接编写触发的判断。

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：，默认情况下页面上是不显示文章的详细信息的，当你点击标题则会触发事件，显示详细信息，下面2个图片分别展示的是默认情况和点击标题之后。当我们再次点击标题，详细内容又变为隐藏。

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

2，action参数

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

     
     
      点击我吧
     

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

// 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下看到如下的打印信息。

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

 

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

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

注意：你指定事件的时候要把事件的名字作为on的属性。比如on=”key-press”。

    
     鼠标移到我身上触发
    

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

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

指定按下键盘某个键后点击触发action所指定的事件，比如按下键盘的Alt触发事件。使用allowedkeys属性指定按下的是那个键。

    
     按下Alt触发我
    

5，允许浏览器默认行为

      

默认情况，Ember会阻止浏览器的默认行为。如果你需要启用浏览器的默认行为，需要在{

{action}}中指定。

{
    {! app/templates/default-browser-action.hbs允许浏览器的默认行为}}
    
     允许浏览器的默认行为
     
     
      阻止浏览器的默认行为
     
    

// app/routes/default-browser-action.js import Ember from 'ember';export default Ember.Route.extend({actions: {logClick: function() {console.log('允许浏览器默认行为。');},logClick2: function() {console.log('阻止浏览器默认行为。');}}});

推荐做法是：上述代码写在component类中，这里为了简便直接写到route中了。

结果

点击第一个链接时，会在当前页面打卡百度。并且可以看到浏览器控制台打印了{

{action}}方法中的日志信息。说明执行了方法logClick并且还触发了浏览器的默认行为页面跳转。

点击第二个链接时，不会打开链接的网址，但是可以看到浏览器控制台打印的信息。说明{

{action}}是执行了的，并且没有触发浏览器的默认行为。

 

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

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

失去焦点时候触发
    

//   app/controllers/myaction.js import   Ember from 'ember'; export   default Ember.Controller.extend({        actions: {              bandDidChange: function(event) {                     console.log('event = ' + event);              }       }      });

       从控制台输出结果看出来event的值是一个对象并且是一个focus事件。

但是如果你在action助手内增加一个属性value=“target.value”(别写错只能是target.value)之后，传递到controller的则是输入框本身的内容。不再是事件对象本身。

    

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

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

    action助手可以用在所有的DOM元素上！