collections - 渲染一个 Backbone.js 集合

Question

我是一个 Backbone.js n00b 并试图了解它。我知道如何使用 View 和内置 underscore.js 模板引擎渲染模型。现在我正在尝试渲染一个集合，这就是我卡住的地方。这里没有服务器，所以我不会远程获取任何东西，只是一个带有一些 JavaScript 的简单 HTML 页面。

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

它在 View 中的模板属性行上中断，但我不确定那是我需要查看的位置。我应该渲染一个集合还是我在这里完全错过了这一点(也许集合只是对对象进行分组，我不应该将它视为我可以渲染的列表)？

谢谢你的帮助...

Answer 1

问题是当您定义 ContinentsView 时，会评估模板并使用 $('#continents-template') - 但是 DOM 还没有准备好，所以它没有找到模板。

要解决它，只需在 initialize 函数中移动模板赋值:

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

关于集合，是的，它们是对对象进行分组，特别是模型集。

您应该编写代码，以便模型(和集合)不知道 View ，只有 View 知道模型。

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