Backborn.js入門

とりあえずBackborn.jsを触ってみた感想

Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

まずは以下のような基本コードを実行「hello world」を表示してみる

(function($){
	var ListView = Backbone.View.extend({    
		el: $('body'),
		initialize: function(){
			_.bindAll(this, 'render');
			this.render(); 
		},
		render: function(){
			$(this.el).append("<ul> <li>hello world</li> </ul>");
		}
	});
	var listView = new ListView();      
})(jQuery);

initializeメソッドはインスタンス生成時に自動で呼び出されるメソッド、renderはページのレンダリング時に利用するメソッド、_.bindAllはイベント性実行時のthisを固定化するメソッド。

つぎはボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。

(function($){
  var ListView = Backbone.View.extend({
    el: $('body'), 
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem'); 
      this.counter = 0;
      this.render();
    },
    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
    },
    addItem: function(){
      this.counter++;
      $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
    }
  });
  var listView = new ListView();      
})(jQuery);

renderメソッドでボタンとul要素を出力して、eventsではイベントを生成しておきます。addItemは数値をアップしながらli要素を追加していきます。

つぎもボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。ただ、文字列をハードコーディングせず、modelで管理

(function($){
  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });      
  var List = Backbone.Collection.extend({
    model: Item
  });

  var ListView = Backbone.View.extend({
    el: $('body'),
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem');
      this.collection = new List();
      this.collection.bind('add', this.appendItem); 
      this.counter = 0;
      this.render();      
    },
    render: function(){
      var self = this;      
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){
        self.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter
      });
      this.collection.add(item);
    },
    appendItem: function(item){
      $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
    }
  });

  var listView = new ListView();
})(jQuery);

新たにmodelを追加、modelはBackbone.Collectionに渡すことでviewとの連携が可能になります。モデルはthis.collectionに保存。addというイベントとしてappendItemメソッドにバインドします。

次はViewをItemとList2つに分けて管理

(function($){
  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });
  
  var List = Backbone.Collection.extend({
    model: Item
  });

  var ItemView = Backbone.View.extend({
    tagName: 'li', 
    initialize: function(){
      _.bindAll(this, 'render'); 
    },
    render: function(){
      $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
      return this;
    }
  });
  
  var ListView = Backbone.View.extend({
    el: $('body'), 
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); 
      
      this.collection = new List();
      this.collection.bind('add', this.appendItem); 

      this.counter = 0;
      this.render();
    },
    render: function(){
      var self = this;
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){
        self.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter 
      });
      this.collection.add(item);
    },

    appendItem: function(item){
      var itemView = new ItemView({
        model: item
      });
      $('ul', this.el).append(itemView.render().el);
    }
  });

  var listView = new ListView();      
})(jQuery);

最後は削除や編集を取り入れたバージョン

(function($){
  Backbone.sync = function(method, model, success, error){ 
    success();
  }
  
  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });
  
  var List = Backbone.Collection.extend({
    model: Item
  });

  var ItemView = Backbone.View.extend({
    tagName: 'li', 
    events: { 
      'click span.swap':  'swap',
      'click span.delete': 'remove'
    },    
    initialize: function(){
      _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); 
      this.model.bind('change', this.render);
      this.model.bind('remove', this.unrender);
    },
    render: function(){
      $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span>     <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; 
    },
    unrender: function(){
      $(this.el).remove();
    },
    swap: function(){
      var swapped = {
        part1: this.model.get('part2'), 
        part2: this.model.get('part1')
      };
      this.model.set(swapped);
    },
    remove: function(){
      this.model.destroy();
    }
  });

  var ListView = Backbone.View.extend({
    el: $('body'), 
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); 
      this.collection = new List();
      this.collection.bind('add', this.appendItem); 

      this.counter = 0;
      this.render();
    },
    render: function(){
      var self = this;
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){
        self.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter 
      });
      this.collection.add(item);
    },
    appendItem: function(item){
      var itemView = new ItemView({
        model: item
      });
      $('ul', this.el).append(itemView.render().el);
    }
  });
  var listView = new ListView();
})(jQuery);

参考:Hello Backbone.js