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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://raw.github.com/josscrowcroft/accounting.js/master/accounting.js"></script>
<!--Editor View Template-->
<script type="text/template" id="editor-template">
    <div class = "well span4"> 
        <fieldset>
            <legend>Editor</legend>    
        <form> 
        <label for="firstName"> First Name :</label>
        <input type = "text" name = "firstName" placeHolder = "First Name" />
        <label for="lastName"> Last Name :</label>
        <input type = "text" name = "lastName" placeHolder = "Last Name" /> 
        <label for="salary"> Salary :</label>
        <input type = "text" name = "salary" placeHolder = "Salary" /> 
        <label for="pro"> Professional :</label>
        <input type = "checkbox" name = "pro" >
        <label for="favSearch"> Fav Search Engine :</label>    
            <input type="text" name="favSearch" placeholder="for eg: http://www.google.com"/>
         </form> 
         </fieldset>   
        </div>
</script>
    <!--Viewer View Template-->
<script type="text/template" id="viewer-template">
    <div class = "well span4" > 
        <fieldset>
        <legend> Preview </legend>
        <form>     
            <label for="firstName">First Name: </label>
            <label name = "firstName" > </label><br/> 
            <label for="lastName">Last Name: </label>            
            <label name = "lastName" > </label><br/> 
            <label for="salary">Salary: </label>            
            <label name = "salary" > </label><br/> 
            <label for="pro">Professional : </label>
    ...

CSS

body {
    padding : 20px;
}
div {
    margin-right : 10px;
}

JavaScript

$(function () {
   
    //create a instance of Backbone Model with some default values.
    var BaseViewModel = new Backbone.Model();
    BaseViewModel.set({
            "firstName": "",
            "lastName": "",
            "salary": "",
            "pro": true
    });
    
    //create a converter function, that formats the 
    //given value as money, for example 123 gets converted to
    //$123.00, used by the money input.
    var salaryConverter = function (direction, value) {
        if (direction === "ModelToView") {
            //format only when the direction is from model to view
            return accounting.formatMoney(value);
        } else {
            //from view to model, just store the plain value
            return value;
        }
    };
    
    //create  a Backbone view
    var BaseView = Backbone.View.extend({
        //local variable for model binder
        _modelBinder: undefined,
        initialize: function () {
            //on view initialize, initialize _modelBinder
            this._modelBinder = new Backbone.ModelBinder();
        },
        close: function () {
            //when view closes, unbind Model bindings
            this._modelBinder.unbind();
        },
        render: function () {
            //when the view is rendered
            //get the templated id from passed in options
            //NOTE: templateId is not a property of Backbone or       ModelBinder, its a custom parameter that we pass into view's constructor
           
            var templateId = "#" + this.options.templateId;

            //construct the template
            var template = _.template($(templateId).html());
            var templateHTML = template();
            //append it to current view
            this.$el.html(templateHTML);
            
            //get the bindings attribute from passed options
             //NOTE: bindings is not a property of Backbone, its a custom parameter that we pass into view's constructor
            var...