0

抱歉标题含糊不清，我不确定发生了什么足以更好地制定它。

所以，这是我认为的渲染：

  render: function () {
    var that = this;
    var template = JST['gists/index'];
    that.$el.html(template);
    console.log(['index to render', that.collection]);
    _.each(that.collection, function (gist) { // <- I set a breakpoint here
      console.log('looping');
      that.appendGistDetail(gist);
    });

    return that;
  },

`console.log(..., that.collection]) 正在正确记录此集合：

["index to render", child]
  0: "index to render"
  1: child
    _byId: Object
    length: 1
    models: Array[1] // <- Note one element. Saving space, but I checked it out and the model is correct
// Worth noting 'looping' is not being logged

然而，前面提到的断点作用域变量的输出显示在 Chrome 开发工具中：

that: child
  $el: jQuery.fn.jQuery.init[1]
  childViews: Array[0]
  cid: "view2"
  collection: child
    _byId: Object
    length: 0
    models: Array[0] // <- Note it's empty, just to test I also set a bp on the line above and it's the same, and when I hovered my mouse over `that.collection` from `console.log` it also said it was empty, but it logs correctly.

所以，我真的不知道该怎么做，甚至不知道发生了什么。

4

3 回答 3

3

所以你在这里设置一个断点：

_.each(that.collection, function (gist) {

看到那that.collection是空的，但你的console.log：

console.log(['index to render', that.collection]);

建议that.collection有一个模型。我怀疑您同时看到两种令人困惑的行为：

  1. console.log将对其参数的实时引用抛出到控制台中，它不会对其当前状态进行快照。因此，如果在console.log调用和查看控制台之间发生了某些变化，您将看到更改后的版本，而不是您认为已登录的版本。
  2. Collection#fetch是一个 AJAX 调用，A代表Asynchronous。

所以事件的顺序大概是这样的：

  1. collection.fetch()触发 AJAX 调用的你。
  2. 你说v = new View({ collection: collection })和v.render()。
  3. console.log被命中并且对集合的引用被隐藏在日志中。
  4. 您到达断点并找到一个空集合。
  5. 服务器响应 AJAX 调用，然后用一个模型填充集合。
  6. 您查看控制台并找到一个包含一个模型的集合。
  7. 混乱。

解决方案是将您的渲染绑定到集合上的事件，并确保您render可以以合理的方式处理空集合。

并且小心使用console.log来帮助您调试异步事物，如果您想要一致且合理的结果，则必须拍摄自己的快照（console.log(collection.toJSON())例如）。

PS：console.log是一个可变参数函数，你可以给它任意数量的参数：

console.log('index to render', that.collection);

此外，集合包含模型列表，但它实际上并不是列表本身。所以像这样的事情_.each(collection, ...)不会让你通过模型，它会让你通过一堆你可能不关心的内部属性。您想要迭代模型：

_.each(collection.models, ....)

或者更好，使用内置的下划线方法：

collection.each(...)
于 2013-09-07T18:06:41.427 回答
0

看起来您想要遍历模型中的每个元素。模型具有attributes允许您访问数据的属性。

如果您使用的是骨干模型：

_.each(that.collection.attributes, //...

如果您使用的是骨干集合：

_.each(that.collection.models, //...
于 2013-09-07T17:24:43.603 回答
0

Collection 也扩展了一些下划线方法each。

that.collection.each(function (gist) {
  // ...
});

下面的代码做同样的事情，但我建议使用第一个。

_.each(that.collection.models, function (gist) {
  // ...
});
于 2013-09-07T17:40:45.990 回答