CODEWITHSUNDEEP
ember.js
Jordan
Jordan

Reputation: 2523

Setting property for class name binding

I'm having some trouble getting my class name binding to properly change the class on a div based on a property that either returns true or false.

export default Ember.Route.extend({
  isConnected: function() {
    return false;
  }.property(),
  actions: {
    var self = this;
    [some ajax action]
    success: function(data){
      self.set('isConnected', true);
    }
  }
  ...
});

And in the template I have the typical class name binding setup

<div class="progress">
  <div class="progress-bar {{if isConnected 'progress-bar-success' 'progress-bar-danger'}}" style="width: 101%;"></div>
</div>

It doesn't seem to be working, and I'm getting no errors

Upvotes: 0

Views: 393

Answers (1)

kushdilip
kushdilip

Reputation: 7906

I have created a ember twiddle for this, which explains how class binding in this case works.

Controller has the property isConnected set to false by default. The action on same controller modifies isConnected which gets reflected in view template.

In your case the property defined on route hence not connected to the view templated.

Upvotes: 1

Related Questions