ModelBinder example 3

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>
<body>
<br>
In this example, the first, last and height labels are bound to the eye color attribute. The drivers license checkboxes are only enabled if the person graduated.

<br>
<br>
Model data:
<div id="modelData"></div>

<hr>
<br>

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

JavaScript

$().ready(function () {

   model = new Backbone.Model({firstName:'Bob', graduated:'maybe', eyeColor: 'green'});

   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 = '\
Edit your information: <span name="firstName"></span> <span name="lastName"></span><br><br>\
Eye Color: Green: <input type="radio" id="graduated_yes" name="eyeColor" value="green">\
Blue: <input type="radio" id="graduated_no" name="eyeColor" value="blue">\
Brown: <input type="radio" id="graduated_maybe" name="eyeColor" value="brown"><br><br>\
<span class="label"> First Name: </span> <input type="text" name="firstName"/><br>\
<span class="label"> Last Name: </span> <input type="text" name="lastName"/><br>\
<span class="label"> Height: </span> <input type="text" name="height"/><br><br>\
\
Graduated: Yes: <input type="radio" id="graduated_yes" name="graduated" value="yes">\
No: <input type="radio" id="graduated_no" name="graduated" value="no">\
Maybe: <input type="radio" id="graduated_maybe" name="graduated" value="maybe"><br><br>\
\
Drivers licence: <input type="checkbox" name="driversLicense"/><br>\
Motorcycle license: <input type="checkbox" name="motorcycleLicense" /><br><br>\
';

           this.$el.html(html);

           var bindings = {
               firstName: '[name=firstName]',
               lastName: '[name=lastName]',
               height: '[name=height]',
               driversLicense:'[name=driversLicense]',
               motorcycleLicense:'[name=motorcycleLicense]',
               graduated:[{selector: '[name=graduated]'}, {selector: '[name=driversLicense],[name=motorcycleLicense]', elAttribute:...