Creación de una vista de red troncal para una colección

Question

¿Cómo puedo vincular una vista principal a una colección en lugar de a un modelo? ¿Debo envolver la colección en un modelo?

p. Ej.

Si tengo un modelo de espina dorsal de cliente y una colección de estos llamados Clientes

Client = Backbone.Model.extend({ 
    defaults: { 
     Name: '' 
    } 
}); 

Clients = Backbone.Collection.extend({ 
    model: Client, 
    url: 'Clients' 
}); 

y una vista

var ClientListView = Backbone.View.extend({ 
     template: _.template($("#clients-template").html()), 
     el: $('#clientlist'), 

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

      this.collection = new Clients(); 
     }, 

     render: function(event){ 
      $(this.el).html(this.template({ this.collection.toJSON())); 

      return this; 
     } 
    }); 

entonces no se puede acceder a cada elemento de cliente en la plantilla de subrayado. Sin embargo si envuelvo la colección como esta

$(this.el).html(this.template({ clients: this.collection.toJSON() })); 

entonces puedo. ¿Es esta la forma correcta de hacerlo? Esperaría que este sea un escenario común, pero no puedo encontrar ningún ejemplo sobre él, ¿lo estoy haciendo de la manera incorrecta?

Answer 1

Sí, debe pasar la colección envuelta.

Addy Osmani está utilizando enfoque similar en sus Backbone Fundamentals ejemplos - véase, por ejemplo this view y correspondiente template:

En la vista:

$el.html(compiled_template({ results: collection.models })); 

En la plantilla:

<% _.each(results, function(item, i){ %> 
    ... 
<% }); %> 

Otro alternativa es tener una vista que cree una vista separada para cada modelo en la colección. Este es un ejemplo de An Intro to Backbone.js: Part 3 – Binding a Collection to a View:

var DonutCollectionView = Backbone.View.extend({ 
    initialize : function() { 
    this._donutViews = []; 
    this.collection.each(function(donut) { 
     that._donutViews.push(new UpdatingDonutView({ 
     model : donut, 
     tagName : 'li' 
     })); 
    }); 
    }, 

    render : function() { 
    var that = this; 
    $(this.el).empty(); 

    _(this._donutViews).each(function(dv) { 
     $(that.el).append(dv.render().el); 
    }); 
    } 
}); 

Answer 2

Es posible que desee echar un vistazo a backbone collectionView.