Backbone.js的Model.get（）返回undefined，使用范围的CoffeeScript +咖啡烤面包机？ [英] backbone.js Model.get() returns undefined, scope using coffeescript + coffee toaster?

问题描述

我正在写使用带咖啡烤面包机（一个真棒NPM模块拼接）的CoffeeScript是构建我的app.js文件的应用程序。

I'm writing an app using coffeescript with coffee toaster (an awesome NPM module for stitching) that builds my app.js file.

我的应用程序类和模板的要求很多有关当前用户信息，所以我有类用户（延伸Backbone.Model）存储作为我的主要应用程序类的属性（扩展Backbone.Router）的一个实例。

Lots of my application classes and templates require info about the current user so I have an instance of class User (extends Backbone.Model) stored as a property of my main Application class (extends Backbone.Router).

随着初始化程序的一部分，我抓住从服务器（这需要身份验证，角色，账号切换等保健）的用户。下面是CoffeeScript的：

As part of the initialization routine I grab the user from the server (which takes care of authentication, roles, account switching etc.). Here's that coffeescript:

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

第一个记录语句输出正确的Backbone.Model在控制台属性对象只是因为它应该：

The first logging statement outputs the correct Backbone.Model attributes object in the console just as it should:

User
_changing: false
_escapedAttributes: Object
_pending: Object
_previousAttributes: Object
_silent: Object
attributes: Object
  account: Object 
  created_on: "1983-12-13 00:00:00"
  email: "[e-mail]"
  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

但是，第二个返回未定义的，尽管模型属性显然在控制台中有记录时。

However, the second returns undefined despite the model attributes clearly being there in the console when logged.

和只是为了让事情变得更有趣，键入window.app.user.get（电子邮件）进入控制台手动返回[e-mail]的预期值...？

And just to make things even more interesting, typing "window.app.user.get('email')" into the console manually returns the expected value of "[e-mail]"... ?

仅供参考，这里的initialize方法如何编译成我的app.js文件：

Just for reference, here's how the initialize method compiles into my app.js file:

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初始化应用程序控制器，像这样：

I initialize the Application controller in my static HTML like so:

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

建议请和谢谢！

推荐答案

有，你需要在这里了解两件事情：

There are two things that you need to understand here:

1. 取是异步的。


2. 某些的console.log 是异步的。

1. fetch is asynchronous.
2. Some console.logs are asynchronous.

因此​​，这是发生了什么：

So this is what's happening:

1. 您拨打 @ user.fetch（）并启动一个AJAX调用。


2. 您拨打的console.log（@user）并做异步工作，但另一位（这是一个很大的，但是！），它需要一个参考 @user ，当的console.log 调用执行其记录的引用将被取消引用。


3. 您拨打的console.log（@ user.get（电子邮件）），这所沿的 @ user.get（'电子邮件需要'）的返回的，在 GET 的通话将被立即执行。


4. 从AJAX调用的（1）返回一些东西了 @user 。


5. 的的console.log 通话避开记录的东西在控制台中。

1. You call @user.fetch() and it launches an AJAX call.
2. You call console.log(@user) and that does another bit of asynchronous work but (and this is a big but!), it takes a reference to @user along with it, the reference will be dereferenced when the console.log call does its logging.
3. You call console.log(@user.get('email')), this takes along what @user.get('email') returns, the get call will be executed immediately.
4. The AJAX call from (1) returns some stuff for @user.
5. The console.log calls get around to logging things in the console.

的的console.log 从（2）携带一个参考 @user 是取填充在（4）;由时间（4）执行 @user 已被填充，所以你在控制台中看到完整的用户。当你调用 @ user.get（电子邮件） （3）的取还没有填充 @user @ user.get（电子邮件）是<$ C $>尚未C>未定义键，你实际上是在说

The console.log from (2) carries a reference to the @user that fetch populates in (4); by the time (4) executes, @user has been populated so you see a full user in the console. When you call @user.get('email') in (3), the fetch hasn't populated @user yet so @user.get('email') is undefined and you're actually saying

console.log(undefined)

为的console.log 调用的参数进行评估（但传递给的console.log 将无法提领！）当你调用该函数，而不是当它完成执行，并把事情在控制台中。

The arguments for the console.log calls will be evaluated (but the final results that are passed to console.log will not dereferenced!) when you call the function rather than when it finishes executing and puts things in the console.

所以，你有各种异步的东西混合在一起，这其中就有的混乱。

So you have various asynchronous things mixing together and therein lies the confusion.

如果你改变code这样：

If you change your code to this:

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

你会得到你期待的结果。

you'll get the results that you're expecting.

这篇关于Backbone.js的Model.get（）返回undefined，使用范围的CoffeeScript +咖啡烤面包机？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！