コレクションのバックボーンビューを作成する

Question

バックボーンビューをモデルではなくコレクションにバインドするにはどうすればよいですか？モデルでコレクションをラップする必要がありますか？

私はバックボーンモデルClientおよびこれらと呼ばれるクライアント

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

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

とビュー

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

のコレクションを持っている場合は

はその後、私は、アンダースコアテンプレート内の各クライアントの要素にアクセスすることはできません。しかし、このようなコレクションをラップすると、

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

となります。これは正しいことでしょうか？私はこれが一般的なシナリオであると予想しますが、私はそれについての例を見つけることができません、私は間違った方法についてそれを行っていますか？

Answer 1

はい、ラップされたコレクションを渡す必要があります。テンプレートに

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

：

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

別のビューで

：例えばthis viewを参照とtemplate対応 -

アディOsmaniは彼Backbone Fundamentals実施例に同様のアプローチを使用しています別の方法としては、コレクション内の各モデルごとに個別のビューを作成するビューを用意することです。ここで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

あなたはbackbone collectionViewを見てみることをお勧めします。