CODEWITHSUNDEEP
ember.js
DaveC426913
DaveC426913

Reputation: 2046

ember bind-attr class is not being set by controller

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

Answers (1)

Alisdair McDiarmid
Alisdair McDiarmid

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

Related Questions