2012-09-09 17 views
10

Tengo este fragmento de código de un tutorial Backbone.js de here. El código es el siguiente:Backbone.js render(). El Uso

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

Hay una cosa que no pude entender por el código anterior. En la función appendItem existe este trozo de código:

itemView.render().el 

Podría alguien explicar por qué la función render() se llama con la parte .el y por qué no sólo itemView.render()?

Gracias por su tiempo y ayuda :-)

Respuesta

12

La llamada render() devuelve el mismo itemView. A continuación, solicita la variable de instancia el (el elemento mismo), que luego se agrega a la vista de lista. En esencia, la vista de lista incluye todos los elementos de los elementos representados individualmente.

+0

gracias por la buena respuesta :-) – Hirvesh