2012-09-09 9 views
10

私はこのコードをBackbone.jsチュートリアルのhereから入手しました。コードは次のとおりです。Backbone.js render()。el使用法

(function($){ 

    var Item = Backbone.Model.extend({ 
     defaults: { 
      part1: 'Hello', 
      part2: 'World' 
     } 
    }); 

    var ItemList = 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 AppView = Backbone.View.extend({ 
     el: $('body'), 

     initialize: function(){ 
      _.bindAll(this, 'render', 'addItem', 'appendItem'); 

      this.collection = new ItemList(); 
      this.collection.bind('add', this.appendItem) 
      this.counter = 0; 
      this.render(); 
     }, 

     events: { 
      'click button#add': 'addItem' 
     }, 

     addItem: function(){ 
      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 
      }); 
      $('#list', this.el).append(itemView.render().el); 
     }, 

     render: function(){ 
      $(this.el).append("<button id='add'>Add Item</button>"); 
      $(this.el).append("<ul id='list'></ul>") 
     }, 
    }); 

    var Tasker = new AppView(); 

})(jQuery); 

上記のコードからわからないことが1つあります。機能appendItemでは、コードのこの作品があります:?

itemView.render().el 

誰もがなぜrender()機能が.el部分と理由だけではなくitemView.render()と呼ばれている私に説明してもらえ

はお時間をいただき、ありがとうございますと render()呼び出しがitemView自身を返します

答えて

12

:-)役立ちます。次に、elインスタンス変数(要素自体)を尋ねると、それがリストビューに追加されます。要するに、リストビューには、個別にレンダリングされた項目のすべての要素が含まれます。

+0

良い回答ありがとう:-) – Hirvesh

関連する問題