视图的集合仅在 console.log 中有效

问题描述

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

Sorry for the vague title, I'm not sure what's going on enough to formulate it better.

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

So, this is the render in my view:

  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]) 正确记录了这个集合:

The `console.log(..., that.collection]) is logging this collection correctly:

["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 开发工具中的范围变量显示:

However the output from the previously mentioned breakpointScope Variable display in Chrome Dev tools:

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.

所以，我不确定该怎么做，甚至不知道发生了什么.

So, I'm not really sure what to do, or even what's going on.

推荐答案

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

So you set a breakpoint here:

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

然后看到 that.collection 是空的，但是你的 console.log:

and see that that.collection is empty but your console.log:

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

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

suggests that that.collection has one model. I suspect that you're seeing two confusing behaviors at the same time:

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

1. console.log throws a live reference to its arguments into the console, it doesn't take a snapshot of their current state. So, if something changes between the console.log call and when you look at the console, you'll see the changed version rather than the one you think you logged.
2. Collection#fetch is an AJAX call and A stands for Asynchronous.

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

So the sequence of events probably looks like this:

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

1. You collection.fetch() which fires off an AJAX call.
2. You say v = new View({ collection: collection }) and v.render().
3. console.log is hit and a reference to the collection gets stashed in the log.
4. You get to your breakpoint and find an empty collection.
5. The server responds to the AJAX call and the collection gets populated with one model.
6. You look at the console and find a collection with one model in it.
7. Confusion.

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

The solution is to bind your rendering to events on the collection and make sure your render can handle an empty collection in a sensible fashion.

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

And be careful with using console.log to help you debug asynchronous things, you'll have to take your own snapshots (console.log(collection.toJSON()) for example) if you want consistent and sensible results.

PS:console.log 是一个可变参数函数，你可以给它尽可能多的参数:

PS: console.log is a variadic function, you can give it as many arguments as you want:

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

此外，一个集合包含一个模型列表，但它实际上并不是列表本身.因此，执行诸如 _.each(collection, ...) 之类的操作不会让您浏览模型，而是会浏览您可能不关心的一堆内部属性.您想遍历模型:

Also, a collection contains a list of models but it isn't actually the list itself. So doing things like _.each(collection, ...) won't spin you through the models, it will spine you through a bunch of internal properties that you probably don't care about. You want to iterate over the models:

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

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

collection.each(...)

这篇关于视图的集合仅在 console.log 中有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！