ModelBinder Editable Content

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({firstParagraph: 'This is the first paragraph'});

    model.bind('change', function () {
        $('#modelData').html(JSON.stringify(model.toJSON()));
    });

    model.trigger('change'); // just to show the #modelData values initially, not needed for the ModelBinder

    ViewClass = Backbone.View.extend({

        _modelBinder: undefined,

        initialize:function () {
            this._modelBinder = new Backbone.ModelBinder();
        },

        close: function(){
            this._modelBinder.unbind();
        },

        render:function () {
            var html = '\
\
<div name="firstParagraph" contenteditable style="height: 100px; width: 300px; border:solid"></DIV> \
';

            this.$el.html(html);

            this._modelBinder.bind(model, .el,this {firstParagraph: {selector: '[name=firstParagraph]', elAttribute: 'html'}});

            return this;
        }
    });

    view = new ViewClass();
    $('#viewContent').append(view.render().$el);
});