控制台中的不确定性主干集合属性分配

Non deterministic Backbone Collection property assignment in console

本文关键字：集合 属性 分配 不确定性 控制台      更新时间：2023-09-26

我正在构建一个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

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

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

fetchcollection.fetch（[选项]）
从服务器获取此集合的默认模型集，并在集合到达时重置集合。

并且fetch将调用parse:

解析集合。解析（响应）
每当服务器在fetch中返回集合的模型时，Backbone就会调用parse。

因此，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();

在调用p.fetchPage()之前，行与行之间经过了足够的时间让AJAX调用返回，因此事情按预期的顺序发生纯属偶然。

如果您需要按特定顺序进行操作，则需要使用fetch提供的success（可能还有error）回调：

选项散列采用success和error回调，这些回调将作为参数传递给(collection, response)。

所以这应该会给你一个一致的结果2:

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

当然，如果fetchPage涉及AJAX调用，那么您必须添加另一层回调才能获得一致的foobar值。

相关文章：