ember.js - Ember action : set property of only target of #each -
i have few actions i'm placing on each item in loop. action reveals of book-covers, instead of 1 want target.
http://guides.emberjs.com/v2.0.0/templates/actions
looks can pass parameter, i'm not sure of syntax.
i've done before in earlier version , remember using this
or should
{{action 'showcover' book}}
... ?
controller
import ember 'ember'; export default ember.controller.extend( { actions: { showcover(book) { // ? this.set('covervisible', true); // or this.toggleproperty('covervisible'); }, ... } });
other thoughts...
actions: { showcover(book) { // setting *route in general* covervisible:true - not want this.set('covervisible', true); // can see class - route... console.log(this); // can see model of route... console.log(this.model); // , can see book object... console.log(book); // how set book object??? // expect book.set('property', true) etc. console.log(book.covervisible); console.log(this.covervisible); } }
template
{{#each model |book|}} <li class='book'> <article> {{#if book.covervisible}} <figure class='image-w book-cover'> <img src='{{book.cover}}' alt='cover {{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 - please suggest title if can think of more succinct one.
@sheriffderek, have provided solution in question itself. can pass additional parameters after action name. like:
<button {{action "showcover" book}}>show cover </button>
working example using ember-twiddle: http://ember-twiddle.com/e7141e41bd5845c7a75c
Comments
Post a Comment