javascript - backbone.js Model.get() 返回未定义，范围使用 coffeescript + 咖啡 toastr ？

Question

我正在编写一个应用程序，使用 coffeescript 和咖啡 toastr (一个很棒的 NPM 拼接模块)来构建我的 app.js 文件。

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

作为初始化例程的一部分，我从服务器获取用户(负责身份验证、 Angular 色、帐户切换等)。这是 CoffeeScript :

@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 中初始化应用程序 Controller ，如下所示:

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

请多多指教，谢谢!

Answer 1

这里有两点你需要明白:

1. fetch是异步的。
2. 一些 console.log s 是异步的。

这就是正在发生的事情:

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.log来自 (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'))   
)

您将获得预期的结果。