Question

我正在使用backbone.js开展我的第一个项目。它应该是Play的前端！带有JSON界面的应用程序。这是我的JS代码的一部分

var api = 'http://localhost:9001/api'

// Models
var Node = Backbone.Model.extend();

// Collections
var Nodes = Backbone.Collection.extend({
  model: Nodes,
  url: api + '/nodes',
});

// Views NODE
var NodeView = Backbone.View.extend({
  el: $("#son_node_elements"),
  render: function(){
    var source = $("#son_node_item_templ").html();
    var template = Handlebars.compile(source);
    $(this.el).append(template(this.model.toJSON()));
    return this;
  }
});

var NodeListView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "render");
    this.collection = new Nodes();
    this.collection.bind("change",this.render);
    this.collection.fetch();
    this.render();
  },

  render: function(){
    _(this.collection.models).each(function(item){ 
      var nodeView = new NodeView({model: item});
      $(this.el).append(nodeView.render().el);
    }, this);   
  }
});

Nodes = new NodeListView({el:$('#son_nodes')});

我的问题是，当this.render()被调用时，this.collection.fetch()仍未完成，而this.collection不包含要呈现的数字。当我在this.render()设置断点时（例如使用firebug），一切正常，因此不会立即调用this.render()。当我访问本地JSON文件而不是我的应用程序的api时，我得到完全相同的结果。有关如何处理此问题的任何建议吗？

Answer 1

也可以从外部视图调用Fetch，因此请让视图监听：

this.collection.bind("reset",this.render);

每次调用this.collection.fetch();

时都会触发重置事件

最后，跳过this.render();不要自己调用，因为重置事件处理程序会为你执行此操作。

Answer 2

你需要在“fetch（）”的“成功”回调中调用“render”：

this.collection.fetch({
  success: function(col) {
    col.render();
  }
});

这推迟了渲染，直到集合提取完成。这都是异步的。

警告：我对Backbone特别不了解，但这些问题肯定是你的问题。换句话说，可能还有其他事情要担心，我没有提到（因为我不知道它们是什么： - ）。

Backbone.js的后期JSON响应

2 个答案: