Question

我有一个简单的Ember应用程序，但我花了5个小时让{{action}}没有任何运气。我已经尝试了3次我能想到的一切，但是我被卡住了。我有最小的路由器。默认情况下会在{{outlet}}中显示一个index.handlebars，并且有一个指向定价页面的链接，点击后会成功转换到定价页面。在定价页面中，我尝试了a和a来包含{{action showMessage}}，它在PricingController中有相应的方法。看看Chrome中的ember-extention我可以看到PricingController确实与视图相关联。但这种方法从未被调用过。我真的不知道还有什么可以尝试。

application.handlebars：

<div class='navbar navbar-inverse navbar-fixed-top'>
  <div class='navbar-inner'>
    <div class='container'>
      <div class='nav-collapse collapse'>
        <ul class='nav'>
          <li>{{#linkTo 'pricing'}}Prijzen{{/linkTo}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class='container' id='main'>
  <div class='content'>
    <div class='row'>
      <div class='span12'>
        <div class='page-header'></div>
        {{outlet}}
      </div>
    </div>
  </div>
</div>

App.Router.map(function() {
  this.route('pricing');
});


App.ApplicationRoute = Ember.Route.extend({
});


App.PricingRoute = Ember.Route.extend({
});

pricing.handlebars：

<h1>some text</h1>
<a href="#" {{action showMessage}} class='btn btn-primary btn-large'>order</a>
<button {{action showMessage}}></button>

App.PricingController = Ember.Controller.extend({
  showMessage: function() {
    toastr.info('info');
  }
});

Answer 1

你可以检查JS控制台的线索，我的猜测是这应该抛出“showMessage未处理”错误。这是因为默认情况下{{action}}帮助程序的目标是当前路径而不是控制器

您可以将showMessage函数移动到路径上的事件对象

App.PricingRoute = Ember.Route.extend({
  events: {
    showMessage: function() {
      toastr.info('info');
    }
  }
});

或将动作的目标设置为控制器

<a href="#" {{action showMessage target="controller"}}>Show</a>

Answer 2

您的代码在最新的emberRCjs和handlebarsrc3中正常运行。您使用的是哪种版本的余烬和把手？

让{{action}}在ember.js中工作

2 个答案: