Reputation: 2046
I'm creating a master-detail table. Before an item has been chosen, the details should not be visible, only becoming visible on clicking of an item.
The reason I'm using a class is because the table is normally 100% width, and it changes size when the detail pops up. This is not implemented yet. Right now, I just want the 'with-details' class to be inserted into the div when I click in the < li >
Here is a rough twiddle: https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4
In my template, the < li > has an action:
<li {{action 'showDetails'}}>
which fires the showDetails action in my controller (I know it's firing because of the :) in console):
withDetails: false,
actions: {
showDetails: function() {
console.log(":)");
this.set('withDetails', true);
}
}
which should add the with-detail class to my details div:
<div {{bind-attr class=":game-details withDetails"}} >
which should match my CSS:
.game-details {
display: none;
border: 1px solid red;
}
.game-details.with-details {
display: block;
border: 1px solid green;
}
It should be that easy. What am I missing?
[ EDIT ] I just learned this trick:
Wrong:
<div class="game-details" {{bind-attr class="withDetails"}}>
Right:
<div {{bind-attr class=":game-details withDetails"}}>
which shows the div, but does not attach a with-details class I can target.
Upvotes: 0
Views: 90
Reputation: 368
bind-attr
is deprecated since 1.13 and disabled since 2.0. Instead, you should use embedded {{if}}
in your class attribute, like so:
<div class="game-details {{if withDetails "with-details"}}">
{{outlet}}
</div>
Upvotes: 2