A Backbone.js models and collection test

A simple test of backbone js collection and models.

by Atinux

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<div class="content">
    <div id="view1">
        View 1 - Model 1 : 
        <span class="text"></span> 
        <button class="change">Change</button>
    </div>
    <div id="view2">
        View 2 - Model <span class="modelNum">2</span> : 
        <span class="text"></span> 
        <button class="change">Change</button>
    </div>
</div>
<a href="#" class="model1ToView2">✣ Set model 1 to view 2</a>
<a href="#" class="model2ToView2">✣ Set model 2 to view 2</a>

CSS

.content {
    padding: 5px;
    background-color: rgb(240,240,245);
    margin: 10px;
}
a {
    color: rgb(80,80,90);
    text-decoration: none;
    display: block;
    margin-left:15px;
    margin-bottom:5px;
}
a:hover {
    text-decoration: underline;
}

JavaScript

var app = {
    Models: {},
    Views: {},
    init: function () {
        this.model1 = new app.Models.test({ id: 1, name: 'Teub' });
        this.model2 = new app.Models.test({ id: 2, name: 'Teubi' });
        
        this.view1 = new app.Views.main({ model: this.model1, el: $('#view1') });
        this.view2 = new app.Views.main({ model: this.model2, el: $('#view2') });

    },
    helpers: {
        setModelToView: function (model, view) {
            view.model.removeView(view);
            view.model = model;
            view.model.addView(view);
        }
    }
};
// Model
app.Models.test = Backbone.Model.extend({
    initialize: function () {
        this.views = {};
        this.bind('change', this.update);
    },
    addView: function (view) {
        this.views[view.cid] = view;
    },
    removeView: function (view) {
        delete this.views[view.cid];
    },
    update: function () {
        _.each(this.views, function (view) {
            if (view && view.render) {
                view.render();
            }
        });
    }
});

// View
app.Views.main = Backbone.View.extend({
    initialize: function (hash) {
        this.model.addView(this);
        this.render();
    },
    events: {
        'click .change': 'change'
    },
    render: function () {
        this.$('.text').html('<b>Name : </b>'+this.model.attributes.name);
    },
    change: function () {
        this.model.set({ name: 'Poule ' + Math.round(Math.random() * 10000) });
    }
});

$(document).ready(function () {
    app.init();
    
    $('a.model1ToView2').click(function () {
        app.helpers.setModelToView(app.model1, app.view2);
        app.view2.render();
        $('.modelNum').text(1);
    });
    $('a.model2ToView2').click(function () {
        app.helpers.setModelToView(app.model2, app.view2);
        app.view2.render();
        $('.modelNum').text(2);
    });

});