Backbone Enable and Disable Button

Demo enable button

by erick

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/v0.2.4/backbone.modelbinding.js"></script>
<form>
    <div id="enabledView">
        <p>Demonstrate data-bind="enabled isValid"</p>
        <label for="isValid">Is Valid?</label>: <input type="checkbox" id="isValid"><br/>
        <button data-bind="enabled isValid">A Button</button>
    </div>

    <div id="disabledView">
        <p>Demonstrate data-bind="disabled invalid"</p>
        <label for="invalid">Invalid?</label>: <input type="checkbox" id="invalid"><br/>
        <button data-bind="disabled invalid">A Button</button>
    </div>
</form>

CSS

div {
    margin-bottom: 2em;
}

label {
    font-weight: bold;
}

JavaScript

MyModel = Backbone.Model.extend({});

EnabledView = Backbone.View.extend({
    el: "#enabledView",
    
    initialize: function() {
        Backbone.ModelBinding.call(this);
    }
});

DisabledView = Backbone.View.extend({
    el: "#disabledView",
    
    initialize: function(){
        Backbone.ModelBinding.call(this);
    }
});

$(function(){
    aModel = new MyModel({isValid: true});
    new EnabledView({model: aModel});

    anotherModel = new MyModel({invalid: true});
    new DisabledView({model: anotherModel});
});