// **This example illustrates how to use a Collection of Models to store data, and how to tie changes in those to a View.** // // _Working example: [3.html](../3.html)._ // _[Go to Example 4](4.html)_ // (function($){ // **Item class**: The atomic part of our Model. A model is basically a Javascript object, i.e. key-value pairs, with some helper functions to handle event triggering, persistence, etc. var Item = Backbone.Model.extend({ defaults: { part1: 'hello', part2: 'world' } }); // **List class**: A collection of `Item`s. Basically an array of Model objects with some helper functions. var List = Backbone.Collection.extend({ model: Item }); var ListView = Backbone.View.extend({ el: $('body'), events: { 'click button#add': 'addItem' }, // `initialize()` now instantiates a Collection, and binds its `add` event to own method `appendItem`. (Recall that Backbone doesn't offer a separate Controller for bindings...). initialize: function(){ _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here this.collection = new List(); this.collection.bind('add', this.appendItem); // collection event binder this.counter = 0; this.render(); }, render: function(){ // Save reference to `this` so it can be accessed from within the scope of the callback below var self = this; $(this.el).append(""); $(this.el).append("