ModelBinder CollectionBinder Ex1

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 src="https://cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/1.1.0/Backbone.CollectionBinder.min.js"></script>
<head>
  <!--The templates-->
  <script id="htmlTemplate" type="text/template">
    <table>
      <thead> <tr> 
      <th>First Name</th> <th>Last Name</th>
      </tr> </thead>
      <tbody> </tbody>
    </table>
    <input type='button' value='submit' class='save'/>
    <div id='result'></div>
  </script>

  <script id="rowTemplate" type="text/template">
    <tr> 
      <td > <input type='text' data-name='name'></td>
      <td ><input type='text' data-name='help'></td>
      <td ><input type='text' data-name="valueString"></td> 
    </tr>
  </script>
</head>

<body>
  <div id="anchor"></div>
  
  
</body>

JavaScript

var SingleEntry = Backbone.Model.extend({});

var entry1 = new SingleEntry({"name":"sysName","help":"name.","timeRetrived":1343832975291,"valueString":"EDS32PR"});
var entry2 = new SingleEntry({"name":"sysDescr","help":"software.","timeRetrived":1343832975291,"valueString":"Lantronix"});
var entry3 = new SingleEntry({"name":"sysLocation","help":"location.","timeRetrived":1343832975293,"valueString":"over the rainbow"});

var CollectionOfEntries = Backbone.Collection.extend({
  model: SingleEntry,
  initialize: function(){
    this.models.push(entry1);
    this.models.push(entry2);
    this.models.push(entry3);
  },
});

var View = Backbone.View.extend({
  initialize: function(){
    this.collection = new CollectionOfEntries();
    this.rowHtml = $('#rowTemplate').html();
    this.elHtml = $('#htmlTemplate').html();
    
    var elManagerFactory = new Backbone.CollectionBinder.ElManagerFactory(this.rowHtml, "data-name");
    this._collectionBinder = new Backbone.CollectionBinder(elManagerFactory);
  },

  render: function(){
    this.$el.html(this.elHtml);
    console.debug(this.collection);
    this._collectionBinder.bind(this.collection, this.$el);
    return this;
  },

  close: function(){
    this._collectionBinder.unbind();
  },
  saveData:function(event){
  console.log(' save collection',this.collection)
   alert(JSON.stringify(this.collection.toJSON()))
  },
  events:{
   'click .save':'saveData'
  }

});

$(document).ready(function(){
  var view = new View();
  view.render();
  $('#anchor').append(view.el);
  console.debug(view);
});