ModelBinder example 2

by Nikki Rabbitt

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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/1.0.5/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({graduated:'no', eyeColor:'blue'});

    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();
        },

        render:function () {
            var html = '\
Graduated: <div class="btn-group" data-toggle="buttons"><label class="btn btn-default"><input type="radio" id="graduated_yes" name="graduated" value="yes">Yes</label>\
<label class="btn btn-default"><input type="radio" id="graduated_no" name="graduated" value="no">No</label></div>\
\
Eye Color: Green: <input type="radio" name="eyeColor" value="green">\
Blue: <input type="radio" name="eyeColor" value="blue">\
Brown: <input type="radio" name="eyeColor" value="brown"><br><br>';

            this.$el.html(html);

            var bindings = {
                graduated:'[name=graduated]',
                eyeColor:'[name=eyeColor]'
            };

            this._modelBinder.bind(this.model, this.el, bindings);

            return this;
        }
    });

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