Ember.js:如何设置动作助手的上下文?

时间:2012-11-17 11:08:38

标签: ember.js

我添加了示例应用程序。 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>

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

我认为问题是当选择一本书时动作助手的上下文不会改变。

如何实现具有不断变化的上下文的动作助手?或者这是一个错误?

1 个答案:

答案 0 :(得分:7)

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

上下文被懒惰地评估,因此问题不再发生

以下是弃用的答案

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

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

请参阅:http://jsfiddle.net/x82dr/17/

顺便说一句,您可以使用controller属性查看ApplicationView的代码,我在其中访问应用程序控制器。使用Ember.js约定,当应用程序初始化时,控制器将注入视图

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