Simple Backbone.ModelBinding Example

shows how simple modelbinding can be with the Backbone.ModelBinding plugin from http://github.com/derickbailey/backbone.modelbinding

by shaneburgess

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.5.3/backbone.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/v0.2.1/backbone.modelbinding.js"></script>
<form id="edit-form">
    first name: <input id="first_name" type="text"><br/>
    last name: <input id="last_name" type="text"><br/>
</form>
<br/>
<div id="display">
    You Entered <span data-bind="text first_name"></span> <span data-bind="text last_name"></span><br/>
    <button id="reset-button">Reset The Form</button>
</div>

JavaScript

SimpleSample = {};

SimpleSample.Person = Backbone.Model.extend({});

SimpleSample.FormView = Backbone.View.extend({
    el: "#edit-form",
    
    initialize: function(){
        Backbone.ModelBinding.call(this);
    }
});

SimpleSample.DisplayView = Backbone.View.extend({
    el: "#display",
    
    events: {
        "click #reset-button": "reset"
    },
    
    initialize: function(){
        Backbone.ModelBinding.call(this);
    },
        
    reset: function(){
        this.model.set({first_name: "joe", last_name: "bob"});
    }
});

SimpleSample.App = function(){
    this.start = function(){
        var person = new SimpleSample.Person();
        var formView = new SimpleSample.FormView({model: person});
        var displayView = new SimpleSample.DisplayView({model: person});
        person.set({first_name: "joe", last_name: "bob"});
    }
}
    
$(function(){
    var app = new SimpleSample.App();
    app.start();
})