Backbone.js チュートリアル #3


はじめに

#2の続きです。
モデルとモデルのコレクションを導入します。コレクションへのモデルの追加をビューへ反映させます。


main.js

(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("")
      $(this.el).append("
    "); _(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("
  • " + item.get('part1') + " " + item.get('part2') + "
  • "); } }); var listView = new ListView(); })(jQuery);

    コード解説

    3~8行目


    var Item = Backbone.Model.extend({
    defaults: {
    part1: ‘hello’,
    part2: ‘world’
    }
    });

    Itemモデルの宣言です。
    defaultsプロパティは初期値を代入します。


    10~12行目


    var List = Backbone.Collection.extend({
    model: Item
    });

    Itemモデルのコレクションです。


    23~24行目


    this.collection = new List();
    this.collection.bind(‘add’, this.appendItem);

    Listコレクションをインスタンス化し、addイベントにappendItemメソッドをバインドします。


    32~38行目


    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);

    self変数にthis参照を保存しておき、後でコールバック関数の中からアクセスします。
    this.collectionのmodelsプロパティはモデルオブジェクトの集合を参照します。
    eachはUnderscore.jsのメソッドで、コレクション内のモデルそれぞれに関して、第一引数の関数をコールします。
    つまり、this.collection.modelsが空でない場合、格納されているモデルの数だけappendItemメソッドが呼ばれhello worldが追加されます。


    40~47行目


    addItem: function(){
    this.counter++;
    var item = new Item();
    item.set({
    part2: item.get(‘part2’) + this.counter
    });
    this.collection.add(item);
    },

    チュートリアル#2では直接hello worldを追加していましたが、今回はモデルのみを扱っています。ビューの更新はaddイベントのリスナーであるappendItem()に委譲します。


    49~51行目


    appendItem: function(item){
    $(‘ul’, this.el).append(“<li>” + item.get(‘part1’) + “ “ + item.get(‘part2’) + “</li>”);
    }

    appendItem()は、コレクションのaddイベントによって起動し、ビューを更新します。


    次のチュートリアルでは、Itemモデルの専用のビューを導入します。