ModelBinder CollectionBinder Ex2

by amorris

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
    ViewClass = Backbone.View.extend({

        tagName: 'tr',
        html: '<td data-name="firstName"></td><td data-name="lastName"></td><td data-name="phone"></td>',
        _modelBinder: undefined,

        initialize: function(){
            _.bindAll(this);
            this._modelBinder = new Backbone.ModelBinder();
        },

        close: function(){
            // An example of what your view should probably be doing when it's closed, otherwise you'll end up w/ zombies
            this._modelBinder.unbind();
            this.off();
            this.undelegateEvents();
            this.remove();
        },

        render: function(){
            this.$el.html(this.html);
            this._modelBinder.bind(this.model, this.el, Backbone.ModelBinder.createDefaultBindings(this.el, 'data-name'));
            return this;
        }
    });

    a = new ViewClass();


    var viewCreator = function(model){ return new ViewClass({model: model}); }

    // The managerFactory helps to generate element managers - an el manager creates/removes elements when models are added to a collection
    var elManagerFactory = new Backbone.CollectionBinder.ViewManagerFactory(viewCreator);

    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, $('tbody'));




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

        // You can pass in a DOM element and get...