bindAttr reverse boolean

Question

In my view I have a button which I want to be disabled when the data of the model is not dirty.

When I output: <button {{ action "update" }} {{bindAttr disabled="isDirty"}}>Save</button> it is enabled when the data is not dirty, and disabled when the data is dirty.

I want to reverse that so I tried this: <button {{ action "update" }} {{bindAttr disabled="!isDirty"}}>Save</button> but now is doesn't check the dirtyness at all. How do I reverse the boolean within a bindAttr helper?

Here is my code:

Controller

App.SiteController = Em.ObjectController.extend({
    isNotDirty: function() {
        return !this.get('isDirty');
    }.property('content')
});
App.SiteEditController = Em.ObjectController.extend({
    needs : [ 'site' ]
});

Template

{{#with controllers.site}}
    <div>{{ isDirty }}</div>
    <div>{{ isNotDirty }}</div>
    <div class="control-group">
        <label class="control-label" for="name">Name</label>
        <div class="controls">
            {{view Ember.TextField valueBinding="name"}}
        </div>
    </div>
    <div class="form-actions">
        <button {{bindAttr disabled="isNotDirty"}} class="btn btn-primary">Save</button>
    </div>
{{/with}}

I outputted the isDirty an isNotDirty property so I could watch them change. But only the isDirty property changes when I change the value of the text-field,

Answer 1

The solution can be found in the API-docs of Ember. There is a list of all available shorthand computed helpers.

I used Ember.computed.not for this case:

App.SiteController = Em.ObjectController.extend({
  isNotDirty: Ember.computed.not('isDirty')
});