ModelBinder example 1

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/0.1.3/Backbone.ModelBinder-min.js"></script>
<br>
Model data: <div id="modelData"></div>

<hr><br>
<div id="viewContent"></div>

JavaScript

$().ready(function () {
    model = new Backbone.Model();
    model.set({firstName: 'Bob'});
    model.bind('change', function () {
      $('#modelData').html(JSON.stringify(model.toJSON()));
    });
    
    ViewClass = Backbone.View.extend({
          _modelBinder: undefined,
        initialize:function () {
            this._modelBinder = new Backbone.ModelBinder();
        },
        close: function(){
            this._modelBinder.unbind();
        },
        render:function () {
            var html = '\
\
<div id="welcome"> Welcome, <span name="firstName"></span> <span name="lastName"></span>\
<br><br>\
Edit your information:\
<input type="text" name="firstName"/>\
<input type="text" name="lastName"/></div>\
\
';
            this.$el.html(html);
            this._modelBinder.bind(model, this.el);
            return this;
        }
    });
    
    view = new ViewClass();
    $('#viewContent').append(view.render().$el);
});