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://raw.github.com/theironcook/Backbone.ModelBinder/master/Backbone.CollectionBinder.min.js"></script>
<br>
Testing actions:
<br>
<input type="button" id="createModel" value="Create Model"/>
<input type="button" id="removeModel" value="Remove Last Model"/>
<input type="button" id="updateModel" value="Update Last Model's Phone"/>
&nbsp;&nbsp;&nbsp;
<input type="button" id="resetCollection" value="Reset Collection"/>
<br>
<br>

View content:<hr>
<div id="viewContent">

    <table>
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone</th>
        </tr>
        </thead>

        <tbody>

        </tbody>
    </table>
</div>

JavaScript

$().ready(function () {

    collection = new Backbone.Collection([
        {id: 0, firstName: 'Adam', lastName: 'Zebra'},
        {id: 1, firstName: 'Bob', phone: '1234567'}
    ]);

    // Just create a simple view and attach the view's element to an existing DOM element
    view = new Backbone.View();
    view.setElement($('#viewContent'));

    // Normally this will be in a separate html template file
    var rowHtml = '<tr><td data-name="firstName"></td><td data-name="lastName"></td><td data-name="phone"></td></tr>';

    // The managerFactory helps to generate element managers - an el manager creates/removes elements when models are added to a collection
    // The 1st arg is the html template that is used to generate view elements for each model in the collection
    // The 2nd arg is the DOM element attribute that is used to bind between the Model attributes and DOM elements - it's optional
    var elManagerFactory = new Backbone.CollectionBinder.ElManagerFactory(rowHtml, "data-name");

    collectionBinder = new Backbone.CollectionBinder(elManagerFactory);

    // This is very similar to the ModelBinder.bind() function but the collectionBinder will also create nested element views
    collectionBinder.bind(collection, view.$('tbody'));




    // Demonstrating that the CollectionBinder has create/remove events you can listen to
    collectionBinder.on('elCreated', function(model, el){
        console.log('The collectionBinder created an element ', model, el);

        // You can pass in a DOM element and get back which elManager is responsible for the element
        // The elManager has more information like the model that is associated with the elManager
        var elManager = collectionBinder.getManagerForEl(el);
        console.log('\tThe elManager and model for the clicked element is ', elManager, elManager.getModel());
    });

    collectionBinder.on('elRemoved', function(model, el){
        console.log('The collectionBinder removed an element ',...