はじめに

#3の続きです。
ItemModelの専用のビューを導入します。

---

main.js

(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('' + this.model.get('part1') + ' ' + this.model.get('part2') + '');
      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);

---

コード解説

14~23行目

  var ItemView = Backbone.View.extend({
    tagName: ‘li’,
    initialize: function(){
      _.bindAll(this, ‘render’);
    },
    render: function(){
      $(this.el).html(‘‘+this.model.get(‘part1’)+’ ‘+this.model.get(‘part2’)+’‘);
      return this;
    }
  });

ItemViewクラスの宣言です。tagNameプロパティは描画する要素を指定します。デフォルトはdivです。他には、className、id、attributesなどのプロパティを指定することもできます。
renderメソッドでは、コンストラクタで渡されるmodelから値を取得してhtmlを構築します。return this;とすることで、render()メソッドの戻り値からelプロパティを参照できるようにしています。

56~61行目

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

前のチュートリアルではhtmlの文字列を追加していましたが、今回はItemViewインスタンスに描画処理を委譲しています。ItemView.render().elまでではelプロパティは指定されていないため、描画位置は決まっていません。$(‘ul’, this.el).append()の時点で位置が決定し描画されます。

次のチュートリアルではさらにイベントを追加し、モデルの変更がビューに反映される様子を見ます。