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