backbone.js Model.get() returns undefined, scope using coffeescript + coffee toaster?

Question

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

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).

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'))   

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: "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

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

And just to make things even more interesting, typing "window.app.user.get('email')" into the console manually returns the expected value of "ben@accomplicecreative.com"... ?

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;
};

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

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

Suggestions please and thank you!

Answer 1

There are two things that you need to understand here:

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

So this is what's happening:

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.

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)

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.

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.