Playing with Collections.

Uses Backbone only really.

by Andy Novocin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<input id="myinput"></input>
<button type="button" id="myButton">Click Me</button>
<div id="messages"></div>
<hr>
<div id="messages2"></div>

JavaScript

$("#myButton").click(function () {
    cc1.removeLast();
    myModels[0].set({
        id: $("#myinput").val() || "0"
    });
    v1.render();
    v2.render();
});

var MyModel = Backbone.Model.extend({
    defaults: {
        "bananas": "12"
    }
});

var myModels = [];
for (var i = 0; i < 10; i++) {
    myModels.push(new MyModel({
        id: i
    }));
}

var Collection = Backbone.Collection.extend({
    removeLast: function () {
        this.pop();
    }
});

var MyView = Backbone.View.extend({
    render: function () {
        this.$el.html(this.collection.pluck('id').join(' ; '));
    }
});

var cc1 = new Collection(myModels);
var cc2 = new Collection(myModels);

var v1 = new MyView({
    el: "#messages",
    collection: cc1
});
var v2 = new MyView({
    el: "#messages2",
    collection: cc2
});

v1.render();
v2.render();