灰烬动作：设置#each目标的属性

Question

我在循环中对每个项目进行了一些操作。目前，该动作揭示了所有的书籍封面，而不仅仅是我想要的目标。

http://guides.emberjs.com/v2.0.0/templates/actions

看起来我可以传递参数，但我不确定语法。

我之前在早期版本中已经完成了此操作并记得使用{{action 'showCover' book}}或者应该是

import Ember from 'ember'; export default Ember.Controller.extend( { actions: { showCover(book) { // ? this.set('coverVisible', true); // or this.toggleProperty('coverVisible'); }, ... } }); ...？

控制器

  actions: {
    showCover(book) {
      // currently this is just setting the *route in general* to coverVisible:true - which is not what I want
      this.set('coverVisible', true);
      // I can see this class - the route...
      console.log(this);
      // I can see the model of this route...
      console.log(this.model);
      // and I can see the book object...
      console.log(book);

      // but how do I set just the book object???

      // I would expect book.set('property', true) etc.

      console.log(book.coverVisible);
      console.log(this.coverVisible);
    }
  }

其他想法......

{{#each model as |book|}}

    <li class='book'>
        <article>
            {{#if book.coverVisible}}
            <figure class='image-w book-cover'>
                <img src='{{book.cover}}' alt='Cover for {{book.title}}'>
            </figure>
            {{/if}}

            ...

            {{#if book.cover}}
            {{#unless book.coverVisible}}
            <div {{action 'showCover'}} class='switch show-cover'>
                <span>Show cover</span>
            </div>
            {{/unless}}
            {{/if}}

{{/each}}

模板

Ajax

另外 - 如果你能想到一个更简洁的话，请为此提出一个标题。

http://ember-twiddle.com/f44a48607738a0b9af81

Answer 1

@sheriffderek，您已经在问题中提供了解决方案。您可以在操作名称后面传递其他参数。类似的东西：

<button {{action "showCover" book}}>Show Cover </button>

使用ember-twiddle的工作示例：http://ember-twiddle.com/e7141e41bd5845c7a75c

Answer 2

你应该打电话给book.set('coverVisible', true);，因为你想在书本身上设置属性。

actions: {
  showCover: function(book) {
    book.set('coverVisible', true);
  }