查看的集合只在工作的console.log [英] View's collection only working in 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

不过从$ P $输出pviously提到断点
在Chrome开发工具范围变量显示：

However the output from the previously mentioned breakpoint Scope 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. 收藏＃获取 是一个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 =新的View（{集合：集合}）。和 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.

解决方案是你的渲染绑定到收集的事件，并确保你的渲染可在一个合理的方式处理一个空的集合。

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

另外，集合包含的型号清单，但它实际上不是列表本身。这样做就像 _东西。每个（收集，...）不再打滑您通过模型，它将脊柱您完成了一堆内部属性的，你可能不要在意。你想迭代模型：

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！