渲染一个 Backbone.js 集合 [英] Render a Backbone.js collection

问题描述

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

I am a Backbone.js n00b and trying to get my head around it. I know how to render a model using a view and the built-in underscore.js templating engine. Now I'm trying to render a collection and that's where I get stuck. There is no server here, so I'm not fetching anything remotely, just a simple HTML page with some 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"}]);
});

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

It breaks on the template attribute line in the view but I'm not sure that's where I need to look. Am I supposed to render a collection or do I miss the point completely here (maybe collections are just grouping objects and I shouldn't look at it as a list I can render)?

感谢您的帮助...

推荐答案

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

The problem is that when you define ContinentsView, the template is evaluated and it uses $('#continents-template') - but the DOM is not ready yet, so it does not find the template.

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

To solve it, simply move the template assignment in the initialize function:

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

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

Regarding collections, yes, they are grouping objects, specifically sets of models.

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

You should make the code so the models (and collections) do NOT know about the views, only the views know about models.

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

这篇关于渲染一个 Backbone.js 集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！