在控制台中的非确定性骨干集合属性分配

Question

我正在构建一个Backbone应用程序，我正在观察一些我不能放置的行为。请看下面的集合：

window.Pictures = Backbone.Collection.extend({ 
    model: Picture, 
    url: 'latest.json', 
    parse: function(response) { 
    this.foobar = 1; 
    }, 
    fetchPage: function() { 
    this.foobar = 2; 
    return this; 
    } 
}); 

在Chrome（或Firefox）控制台我发出以下命令：

> p = new Pictures(); p.fetch(); p.fetchPage(); 
> p.foobar 
1 

当我这样做：

> p = new Pictures(); p.fetch() 
> p.fetchPage(); 
> p.foobar 
2 

我真不”不明白这一点。为什么第一次执行与第二次执行不同？

Answer 1

的fetch调用是异步的，因为它涉及到一个AJAX调用服务器：

取 collection.fetch（[选项]）
取模型的默认设置为这个集合从服务器，他们到达时重置收藏。

而且fetch将调用parse：

解析 collection.parse（响应）
解析被称为骨干每当集合的模型是由服务器返回，在fetch。

所以p.parse()可之前或之后p.fetchPage()根据时序是你无法控制的问题调用。

在第一种情况：

> p = new Pictures(); p.fetch(); p.fetchPage(); 

fetchPage获取调用fetch从服务器获取它的响应和周围变得调用parse之前，因此调用序列结束这样的：

1. 您致电p.fetch()。
2. AJAX调用已完成。
3. 您致电p.fetchPage()。
4. 收到AJAX响应。
5. AJAX成功处理程序调用p.parse()。

在第二种情况：

> p = new Pictures(); p.fetch() 
> p.fetchPage(); 

相当的时间过去的AJAX调用p.fetchPage()之前返回线之间被称为这样的事情在订单意外纯属奢望的发生。

如果你需要的东西在一定的顺序发生，那么你就需要使用success（也可能是error）回调fetch提供：

的选项散列接受success和error其回调将通过(collection, response)作为参数。

因此，这应该给你的2一致的结果：

p = new Pictures(); 
p.fetch({ 
    success: function(collection, response) { 
     collection.fetchPage(); 
     console.log(collection.foobar); 
    } 
}); 

当然，如果fetchPage包括AJAX调用，然后你就必须添加回调的另一个层得到一致foobar值。