Emberjs Layout error

Question

Hi have started to develop an application using emberjs so far so good with everything, I have noticed one thing though, every now and again when I refresh the web page nothing is displayed, I get the following error in the browser console: Uncaught TypeError: Cannot read property 'layoutStates' of undefined -- ember-layout.js

If I refresh the page again the error goes away,

Why do I get this error? How can I stop this error from happening?

Thanks in advance...

route manager code as requested

App.routeManager = em.RouteManager.create({
    rootView: App.main,
    home: em.LayoutState.create({
        selector: '.inbox',
        viewClass: App.InboxView,
        enter: function (stateManager, transition) {
            this._super(stateManager, transition);
        }
    }),
    View2: em.LayoutState.create({
        route: 'contacts',
        selector: '.contacts',
        viewClass: App.ContactsView,
        enter: function (stateManager, transition) {
            this._super(stateManager, transition);
        }
    }),
    View3: em.LayoutState.create({
        route: 'account',
        selector: '.account',
        viewClass: App.AccountView,
        enter: function (stateManager, transition) {
            this._super(stateManager, transition);
        }
    })
});

Error happens line 126 of ember-layouts.js

 init: function() {
    // This is currently experimental. We allow
    // the view itself to define it's substates
    // for better encapsulation. To do this, set
    // the layoutStates property.
    var viewClass = get(this, 'viewClass');
    if(viewClass) {
      var layoutStates = get(viewClass, 'proto').layoutStates;
      set(this, 'states', layoutStates);
    }

     this._super();
   },

I don't see any problem here.Are you sure App.main is set before the RouteManager creation, and added to the body after the body is created ? If you don't know, could you add the main html page where you insert the App.main view ? — louiscoquio
@louiscoquio yes App.main is before and it is added to the DOM after RouteManager creation, I have been looking into it a bit more and found the problem exists on the following line in the ember-layouts.js see above I cant insert code here it says its experimental so I will have to dig further through the code to see whats happening, I am thinking that one of the files required is not loaded on time, I have tried to overcome this using the order plugin of require.js — user655261

user655261 user655261 · Accepted Answer · 2012-03-21T14:36:21

Found the problem to this, it had nothing to do with the ember-layouts, it had to do with require js. At the top of the file I had to replace require with define, its explained in require js api documentation http://requirejs.org/docs/api.html.

 //------THIS ONE IS WRONG AND CAUSES THE ERROR ------------------
 require(['../../lib/ember/load-ember','model/notificationModel'], 
         function (em, notification) {});


 //Changing to define has fixed the problem in all browsers
 define(['../../lib/ember/load-ember','model/notificationModel'], 
         function (em, notification) {});

Emberjs Layout error

2 Answers