Question

I’m writing an app in Parse.com, and I’ve defined an ‘AppState’ object which stores various constants and values which I’m passing through the app (a bit like the PHP Session).

At one point, I’m trying to read a value from the AppState object, and although it appears to be set, I’m not getting the value back.

AppState is defined by:

var AppState = Parse.Object.extend("AppState", {
    defaults: {
        folderShown: '',
        folderSpecial: 'all',
        showCaption: false
    }
});

I then have, to kick the app off:

var state = new AppState;
new AppRouter;
new AppView;

In AppRouter, I’m setting the value of “route”:

var AppRouter = Parse.Router.extend({
    routes: {
        "viewPage/:object_id": "viewPage",
    },
    initialize: function(options) {
    },
    viewPage:   function(object_id) {
        state.set("currentPage", object_id);
        state.set("route", "view");
    }
});

In App View, I have:

var AppView = Parse.View.extend({
  initialize:   function() {
      this.render();
  },
  render:  function() {
    console.log(state);
    console.log(state.get('route'));
  }
});

The first console log shows state, with the attribute ‘route’ set to ‘view’:

attributes: Object
  folderShown: ""
  folderSpecial: "all"
  route: "view"
  showCaption: false

The second console log shows ‘undefined’.

If I get one of the default attributes, such as ‘folderSpecial’, it reads the correct value.

What am I doing wrong?

Answer 1

Routes defined in routers are evaluated when Backbone.history.start() is called.
From http://backbonejs.org/#Router

During page load, after your application has finished creating all of
its routers, be sure to call Backbone.history.start(), or
Backbone.history.start({pushState: true}) to route the initial URL.

which means that your state object will only be updated when Backbone.history.start() is called: in your case, after your view is initialized.

Calling Backbone.history.start before new AppView should solve your problem.

A Fiddle simulating your problem : http://jsfiddle.net/nikoshr/LWh2P/
And a modified version : http://jsfiddle.net/nikoshr/LWh2P/1/