Ember .js : How to set context of an action helper?

Question

我添加了示例应用程序。 http://jsfiddle.net/Sly7/amG56/

Js:

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  selectedBook: null
});

App.ApplicationView = Ember.View.extend({

  actions: {
    selectBook: function(book) {
      this.get('controller').set("selectedBook", book);
    },

    cancel: function(book) {
      alert(book);
    }
  }
});

App.Book = Em.Object.extend({
  name: null
});

模板:

<script type="text/x-handlebars">
  {{#each book in books}}
    <a {{action "selectBook" book target="view"}} href="#">select {{book.name}}</a><br />
  {{/each}}
  <hr />
  Selected Book: {{selectedBook.name}}
  <br />
  <a {{action "cancel" selectedBook target="view"}} href="#">cancel selected book</a>
</script>

选择其中一本书。您会看到将显示该书的名称。但是“取消选择的书”链接不起作用。

我认为问题是在选择书籍时不会改变 Action 助手的上下文。

如何实现上下文不断变化的 Action 助手？或者这是一个错误？

Answer 1

答案在指南中 http://emberjs.com/guides/templates/actions/#toc_action-parameters

并且上下文被惰性评估，所以问题不再发生

下面已弃用的答案

这里的问题是操作助手是用 selectedBook 上下文解释的。但是此时selectedBook为null。所以当点击链接时，即使你之前选择了一本书，也为时已晚，对于注册的 Action ，上下文仍然是空的。作为一种变通方法，您可以使用 {{with}} block 将其括起来。

{{#with selectedBook}} 
  Selected Book: {{name}}
  <br />
  <a {{action cancel this target="view"}} href="#">cancel selected   book</a>
{{/with}}

参见:http://jsfiddle.net/x82dr/17/

顺便说一句，您可以看到 ApplicationView 的代码，我在其中使用 Controller 属性访问应用程序 Controller 。使用 Ember.js 约定， Controller 在应用程序初始化时注入(inject)到 View

更新:{{with}} 助手的使用现在似乎不是强制性的，参见:https://github.com/emberjs/ember.js/issues/1150