4

我正在编写一个使用咖啡脚本和咖啡烤面包机（用于拼接的很棒的 NPM 模块）的应用程序，它构建了我的 app.js 文件。

我的许多应用程序类和模板都需要有关当前用户的信息，因此我有一个用户类实例（扩展 Backbone.Model）存储为我的主应用程序类（扩展 Backbone.Router）的属性。

作为初始化例程的一部分，我从服务器获取用户（它负责身份验证、角色、帐户切换等）。这是咖啡脚本：

@user = new models.User
@user.fetch()
console.log(@user) 
console.log(@user.get('email'))

第一个日志语句在控制台中输出正确的 Backbone.Model 属性对象，就像它应该的那样：

User
_changing: false
_escapedAttributes: Object
_pending: Object
_previousAttributes: Object
_silent: Object
attributes: Object
  account: Object 
  created_on: "1983-12-13 00:00:00"
  email: "ben@accomplicecreative.com"
  icon: "0"
  id: "1"
  last_login: "2012-06-07 02:31:38"
  name: "Ben Ipsen"
  roles: Object
__proto__: Object
changed: Object
cid: "c0"
id: "1"
__proto__: ctor
app.js:228

然而，第二个返回undefined尽管模型属性在记录时明确存在于控制台中。

为了让事情变得更有趣，在控制台中手动输入“window.app.user.get('email')”会返回“ben@accomplicecreative.com”的预期值......？

仅供参考，下面是初始化方法如何编译到我的 app.js 文件中：

Application.prototype.initialize = function() {
  var isMobile;
  isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
  this.helpers = new views.DOMHelpers().initialize().setup_viewport(isMobile);
  this.user = new models.User();
  this.user.fetch();
  console.log(this.user);
  console.log(this.user.get('email'));
  return this;
};

我在我的静态 HTML 中初始化 Application 控制器，如下所示：

jQuery(document).ready(function(){
   window.app = new controllers.Application();
});

请提出建议，谢谢！

4

1 回答 1

3

这里有两点你需要了解：

  1. fetch是异步的。
  2. 有些console.logs是异步的。

所以这就是正在发生的事情：

  1. 你打电话@user.fetch()，它会启动一个 AJAX 调用。
  2. 您调用console.log(@user)它会进行另一项异步工作，但是（这是一个很大的但是！），它需要一个对它的引用，当调用执行其日志记录@user时，该引用将被取消引用。console.log
  3. 你调用console.log(@user.get('email'))，这会带走@user.get('email') 返回的，get调用会立即执行。
  4. 来自(1)的 AJAX 调用为@user.
  5. 这些console.log调用可以在控制台中记录事情。

console.logfrom (2)携带对@user填充fetch在(4)中的的引用；到(4)执行时，@user已填充，因此您在控制台中看到一个完整的用户。当你调用@user.get('email')( 3)时，还fetch没有填充，你实际上是在说@user@user.get('email')undefined

console.log(undefined)

调用的参数将在您调用函数时console.log进行评估（但传递给的最终结果console.log不会取消引用！），而不是在它完成执行并将内容放入控制台时。

因此，您将各种异步事物混合在一起，其中就存在混乱。

如果您将代码更改为此：

@user = new models.User
@user.fetch(success: =>
    console.log(@user) 
    console.log(@user.get('email'))   
)

你会得到你期望的结果。

于 2012-06-08T06:49:25.833 回答