ループ内の各アイテムにいくつかのアクションを配置しています。現在、アクションは、ターゲットにしたい 1 つだけではなく、すべての本の表紙を明らかにします。
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}}
また、もっと簡潔なタイトルが思いつく場合は、このタイトルを提案してください。