백본 실례

 1 (function($){
 2   //  item
 3   var Item = Backbone.Model.extend({
 4     defaults: {
 5       part1: 'hello',
 6       part2: 'world'
 7     }
 8   });
 9   
10   var List = Backbone.Collection.extend({
11     model: Item
12   });
13   //  item html 
14   var ItemView = Backbone.View.extend({
15     tagName: 'li', // name of (orphan) root tag in this.el
16     initialize: function(){
17       _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
18       return this.render();
19     },
20     render: function(){
21       $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
22       return this; // for chainable calls, like .render().el
23     }
24   });
25   //  view 
26   var ListView = Backbone.View.extend({
27     el: $('body'), // el attaches to existing element
28     events: {
29       'click button#add': 'addItem'
30     },
31     initialize: function(){
32       _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
33       
34       this.collection = new List();
35       //
36       this.collection.bind('add', this.appendItem); // collection event binder
37 
38       this.counter = 0;
39       return this.render();
40     },
41     render: function(){
42       var self = this;
43       $(this.el).append("<button id='add'>Add list item</button>");
44       $(this.el).append("<ul></ul>");
45       //  item
46       _(this.collection.models).each(function(item){ // in case collection is not empty
47         self.appendItem(item);
48       }, this);
49       return this;
50     },
51     addItem: function(){
52       this.counter++;
53       //  modle 
54       var item = new Item();
55       //  
56       item.set({
57         part2: item.get('part2') + this.counter // modify item defaults
58       });
59       //  collection  , add 
60       //   this.collection.bind('add', this.appendItem);
61       this.collection.add(item);
62       // console.log(this.collection);
63     },
64     appendItem: function(item){
65       var itemView = new ItemView({
66         model: item
67       });
68       console.log('-----------------');
69       $('ul', this.el).append(itemView.el);
70       // console.log(itemView.render());
71     }
72   });
73 
74   var listView = new ListView();      
75 })(jQuery);