Рендеринг коллекции Backbone.js

Я - Backbone.js n00b и пытаюсь обнять его. Я знаю, как визуализировать модель с использованием представления и встроенного шаблона templates для underscore.js. Теперь я пытаюсь сделать коллекцию и то, где я застрял. Здесь нет сервера, поэтому я ничего не делаю удаленно, просто простая HTML-страница с некоторым JavaScript.

ContinentModel = Backbone.Model.extend({});

ContinentsCollection = Backbone.Collection.extend({
  model: ContinentModel,

  initialize: function () {
    this.continentsView = new ContinentsView;
    this.bind("reset", this.continentsView.render);
  }
});

ContinentsView = Backbone.View.extend({
  el: '#continents',
  template: _.template($('#continents-template').html()),

  render: function() {
    var renderedContent = this.template(this.collection.toJSON());
    $(this.el).html(renderedContent);
    return this;
  }
});

$(function() {
  var continentsCollection = new ContinentsCollection();
  continentsCollection.reset([{name: "Asia"}, {name: "Africa"}]);
});

Он разбивается на строку атрибута шаблона в представлении, но я не уверен, что там, где мне нужно посмотреть. Могу ли я представить коллекцию или я полностью упустил точку здесь (возможно, коллекции просто группируют объекты, и я не должен рассматривать ее как список, который я могу отобразить)?

Спасибо за помощь...

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что при определении ContinentsView шаблон оценивается и использует $('#continents-template') - но DOM еще не готов, поэтому он не находит шаблон.

Чтобы решить эту проблему, просто переместите назначение шаблона в функцию инициализации:

ContinentsView = Backbone.View.extend({
  el: '#continents',
  initialize: function() {
     this.template = _.template($('#continents-template').html());
  }
  ...

Что касается коллекций, да, они группируют объекты, в частности, наборы моделей.

Вы должны сделать код, чтобы модели (и коллекции) НЕ знали о представлениях, но только представления о моделях.

ContinentModel = Backbone.Model.extend({});

ContinentsCollection = Backbone.Collection.extend({
  model: ContinentModel,
  // no reference to any view here    
});

ContinentsView = Backbone.View.extend({
  el: '#continents',

  initialize: function() {
    this.template = _.template($('#continents-template').html());
    // in the view, listen for events on the model / collection
    this.collection.bind("reset", this.render, this);
  },

  render: function() {
    var renderedContent = this.template(this.collection.toJSON());
    $(this.el).html(renderedContent);
    return this;
  }
});

$(function() {
  var continentsCollection = new ContinentsCollection();
  continentsCollection.reset([{name: "Asia"}, {name: "Africa"}]);
  // initialize the view and pass the collection
  var continentsView = new ContinentsView({collection: continentsCollection});
});

Ответ 2

Также стоит отметить, что есть дополнительные сложности, которые быстро поднимают голову при рендеринге коллекции в представлении. Например, представление, как правило, должно быть повторно отображено, когда модели добавляются или удаляются из коллекции. Это не наука о ракетах, чтобы реализовать свое собственное решение, но, вероятно, стоит посмотреть на существующие решения, так как есть немало проверенных и проверенных там.

Backbone.CollectionView - это класс надежного класса коллекций, который обрабатывает выбор моделей в ответ на щелчки мыши, переупорядочивая коллекцию на основе перетаскивания, фильтрация видимых моделей и т.д.

Несколько популярных фреймворков, построенных поверх базовой линии, также предоставляют простые классы просмотра коллекции, такие как Backbone.Marionette, Chaplin и Менеджер макетов.

Несмотря на то, что сама Backbone не предоставляет никакой структуры для рендеринга коллекции, это нетривиальная проблема, и у многих людей есть разные мнения о как это должно быть сделайте. К счастью, такая общая потребность в том, что в экосистеме уже есть немало хороших вариантов.