Создание представления о скелетах для коллекции

Как я могу привязать представление о скелете к коллекции, а не к модели? Нужно ли обертывать коллекцию в модели?

например.

Если у меня есть базовая модель Client и коллекция этих клиентов Clients

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

то я могу. Правильно ли это? Я ожидал бы, что это будет распространенным сценарием, но я не могу найти никаких примеров на нем, я об этом не ошибаюсь?

ОТВЕТЫ

Ответ 1

Да, вам нужно передать обернутую коллекцию.

Адди Османи использует аналогичный подход в своих "Основах основы" - см., например, этот вид и соответствующий template:

В представлении:

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

В шаблоне:

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

Другой альтернативой является наличие представления, которое создаст отдельный вид для каждой модели в коллекции. Вот пример из Вступление к Backbone.js: Часть 3 - привязка коллекции к просмотру:

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