Creazione di una vista backbone per una collezione

Question

Come è possibile associare una vista backbone a una raccolta anziché a un modello? Devo avvolgere la collezione in un modello?

ad es.

Se ho un modello di spina dorsale client e una collezione di questi cosiddetti clienti

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

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

e 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; 
     } 
    }); 

allora non posso accedere a ciascun elemento cliente nel modello di sottolineatura. Tuttavia se avvolgo la raccolta in questo modo

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

allora posso. È questo il modo corretto per farlo? Mi aspetto che questo sia uno scenario comune, ma non riesco a trovare alcun esempio su di esso, sto andando su di esso nel modo sbagliato?

Answer 1

Sì, è necessario passare la raccolta incartata.

Addy Osmani utilizza approccio simile ne Backbone Fundamentals esempi - vedi ad esempio this view e corrispondente template:

Nella vista:

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

Nel template:

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

Un'altra alternativa è avere una vista che creerà una vista separata per ogni modello nella collezione. Ecco un esempio da 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

Si potrebbe voler dare un'occhiata a backbone collectionView.