ember.js - 为什么按钮上的Action事件不调用控制器函数

Question

我有一个 index.html 文件，其中有一个带有操作处理程序的按钮。

<button {{action 'modules'}} > press </button>

但是当我按下按钮时没有任何反应。

请看jsbin的代码：

http://jsbin.com/OREMORe/1/edit

随时纠正任何其他不一致之处。感谢任何帮助。谢谢。

Answer 1

你会这样做。请注意，您的代码存在一些问题：

1）您的车把代码与您的按钮没有包装在车把script标签中 2）您的“模块”模板在应用程序模板中 3）您没有包含到必要库的有效链接 4）没有rootElement指定应用程序 5) 您试图ModulesController在ApplicationRoute. 我插入了指向“模块”的重定向 6）您尝试在循环中访问module，{{#each}}但在您的模型中不存在。你想要的是content.

<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="modules">
    <ul>
      {{#each content}}
      <li>{{this}}</li>
      {{/each}}
        <button {{action 'modules'}} > press </button>
    </ul>
  </script> 

和：

var Test1 = Ember.Application.create({
  rootElement: 'body',
    ready: function() {
        console.log("App ready1");
    }
});

Test1.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('modules');
  }
});


Test1.Router.map( function() {
    this.route('modules');
});

Test1.ModulesController = Ember.Controller.extend({
    actions: {
        modules: function() {
            console.log('clicked the button');
/*            this.transitionToRoute('modules');*/
        }
    }
});
Test1.ModulesRoute = Ember.Route.extend({
    model: function() {
        return ['item1', 'item2'];
     }
});