0

I have a few actions that I'm placing on each item in a loop. Currently the action reveals all of the book-covers, instead of just one I want to target.

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

Looks like I can pass a parameter, but I'm not sure of the syntax.

I've done this before in earlier version and remember using this or should it be

{{action 'showCover' book}} ... ?


Controller

import Ember from 'ember';

export default Ember.Controller.extend( {

  actions: {
    showCover(book) { // ?
      this.set('coverVisible', true); // or
      this.toggleProperty('coverVisible');
    },
    ...
  }

});

other thoughts...

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


Template

{{#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 - please suggest a title for this if you can think of a more succinct one.

http://ember-twiddle.com/f44a48607738a0b9af81

sheriffderek
  • 8,848
  • 6
  • 43
  • 70

2 Answers2

0

@sheriffderek, You have already provided the solution in your question itself. You can pass the additional parameters after the action name. Something like:

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

Working example using ember-twiddle: http://ember-twiddle.com/e7141e41bd5845c7a75c

phkavitha
  • 817
  • 1
  • 9
  • 26
  • Well, I passed `book` into the action... and as a parameter in the action helper thing... - and I've had it working like you have just like from the docs - but it's not acting like I expect : / – sheriffderek Sep 30 '15 at 00:43
0

You should be calling book.set('coverVisible', true); as you are wanting to set the property on the book itself.

actions: {
  showCover: function(book) {
    book.set('coverVisible', true);
  }
LukeC
  • 111
  • 5
  • Hi @LukeC That's what I would think too, but `Uncaught TypeError: book.set is not a function` ... You can see the "ember-twiddle" ~ I've set it like you suggest. – sheriffderek Oct 02 '15 at 17:19