Simple Model Binding Example

A demo app for demonstrating the usage of Backbone with Backbone Model Binding plugin for two way data-binding

by niki4810

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>
<script type="text/template" id="view-template">
    <div class = "edit-container" > 
        <textarea name = "inputText" placeholder = "start typing here ..." > </textarea>
</div > <div class = "preview-container" > <h3 > Preview </h3>
<hr/> <p name = "inputText" > </p>
</div >
</script>
<div class="container"></div>

CSS

.container {
    width:400px;
}
.edit-container, .preview-container {
    width : 100%;
}
.edit-container textarea {
    width:100%;
    height : 100px;
}

JavaScript

$(function () {

    var BaseViewModel = new Backbone.Model();
    BaseViewModel.set({
        "inputText": ""
    });
    var ViewClass = Backbone.View.extend({
        _modelBinder: undefined,
        initialize: function () {
            this._modelBinder = new Backbone.ModelBinder();
        },
        close: function () {
            this._modelBinder.unbind();
        },
        render: function () {
            var template = _.template($('#view-template').html());
            var templateHTML = template();
            this.$el.html(templateHTML);

            this._modelBinder.bind(this.model /*the model to bind*/ , this.el /*root element*/ );
            return this;
        }
    });

    var myView = new ViewClass({
        model: BaseViewModel
    });
    $(".container").append(myView.render().$el);

});