ember.js - Ember 操作：设置#each 的唯一目标的属性

Question

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

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

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

我以前在早期版本中做过这个，记得使用this或者应该是

{{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}}

ALSO - 如果您能想到一个更简洁的标题，请为此提出一个标题。

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);
  }