Backbone.js render(). El Verwendung

Question

Ich habe dieses Stück Code aus einem Backbone.js Tutorial von here. Der Code ist wie folgt:

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

Es gibt eine Sache, die ich aus dem obigen Code nicht verstehen konnte. In der Funktion appendItem gibt es dieses Stück Code:

itemView.render().el 

Könnte mir jemand erklären, warum die render() Funktion mit dem .el Teil und warum nicht nur itemView.render() genannt wird?

Vielen Dank für Ihre Zeit und helfen :-)

Answer 1

Der render() Aufruf der itemView selbst zurückgibt. Es fragt dann nach der Instanzvariable el (das Element selbst), die dann an die Listenansicht angehängt wird. Im Wesentlichen enthält die Listenansicht alle Elemente der Elemente, die einzeln gerendert werden.