CODEWITHSUNDEEP
javascriptcssember.js
Matthew Wilson
Matthew Wilson

Reputation: 56

Ember class attributes for falseys are not being assigned when rendering page

Ember class attributes for falseys are not being assigned when rendering page. I have two button elements Yes / No. The inactive button has a class rendering the opacity : .3 That is working fine. However I need to set a default behavior on these buttons so that on rendering the page the Yes is inactive. Should be simple I just set the property accordingly. However it isn't adding the appropriate class for the false value.

Hope it is clear what I am trying to do and what the problem is. Thank you for your time.

I made a JSbin http://jsbin.com/vixayatuda/1/edit?html,css,js,output

window.App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend({
  takingTrade: false,

  actions: {
    makeTrade: function() {
      this.set('takingTrade', true);
    },
    makeNotTrade: function() {
      this.set('takingTrade', false);
    }

  }
});


<script type="text/x-handlebars">
  <button {{action 'makeTrade' this}} class="btn btn-success" {{bind-attr class="takingTrade::inactive"}}>YES</button>
  <button {{action 'makeNotTrade'}} class="btn btn-success" {{bind-attr class="takingTrade:inactive"}}>NO</button>
  <p>{{takingTrade}}</p>
</script>

Upvotes: 1

Views: 30

Answers (1)

Kalman
Kalman

Reputation: 8131

The ember docs (http://emberjs.com/guides/templates/binding-element-class-names/#toc_static-classes) state that

Bound class names and static class names cannot be combined.

Because of this, your "YES" button should look like this:

<button {{action 'makeTrade' this}} {{bind-attr class="takingTrade::inactive :btn :btn-success"}}>YES</button>

See full example here

Upvotes: 1

Related Questions