CODEWITHSUNDEEP
javascriptember.js
mrappleton
mrappleton

Reputation: 372

Ember bindAttr to classname on page render

I have an Ember template which contains two buttons and a div. The buttons toggle a controller value to true and false. I'm using the bindAttr helper to set a class on the currently toggled button and on the div.

This works fine once I have clicked a button, but the class names are not setup correctly on initial page render. If I print the toggled property into the template it shows as the correct value, it just doesn't seem to affect the class name bindings until it changes.

A simplified version of my code looks like this:

<div {{bindAttr class="toggled:is-toggled"}}></div>
<button {{action toggleOn}} {{bindAttr class="isToggled:is-active"}}>Toggle on</button>
<button {{action toggleOff}} {{bindAttr class="notToggled:is-active"}}>Toggle off</button>

App.MyController = Em.ObjectController.extend({
  toggled: fasle,

  isToggled: function() {
    return this.get('toggled');
  }.property('toggled'),

  notToggled: function() {
    return !this.get('toggled');
  }.property('toggled'),

  actions: {
    toggleOn: function() {
      this.set('toggled', true);
    },

    toggleOff: function() {
      this.set('toggled', false);
    }

  }
});

I expect this is something really simple but I can't for the life of me figure out what it is. Can anyone help? Here's a jsbin showing the same code http://jsbin.com/esURuWE/8/edit.

Upvotes: 1

Views: 342

Answers (1)

Hyder
Hyder

Reputation: 1463

I think the problem is here 

toggled: fasle,

shouldn't it be 

toggled: false,

A working Jsbin here

Also You need not to have properties for returning truthy or falsy value of the toggled property, you can directly use the toggled property as the binded attribute

<button {{action toggleOn}} {{bind-attr class="toggled:is-active"}}>Toggle on</button>
<button {{action toggleOff}} {{bind-attr class="toggled::is-active"}}>Toggle off</button>

Note the toggled::is-active, here is-active is set when toggled is false

And also the camelCased version of bindAttr is deprecated, use bind-attr instead.

Hope these helps

Upvotes: 3

Related Questions