渲染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，模板进行评估，它使用 $（'＃洲模板'） - 但是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.

您应该使code这样的模型（集合）不知道的意见，只有观点了解的机型。

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屋！