Emberjs 布局错误答案

【问题标题】：Emberjs Layout errorEmberjs 布局错误
【发布时间】：2012-04-01 21:59:24
【问题描述】：

您已经开始使用 emberjs 开发应用程序，到目前为止一切都很好，但我注意到一件事，当我不时刷新网页时没有显示任何内容，我在浏览器控制台中收到以下错误：未捕获的类型错误：无法读取未定义的属性“layoutStates”——ember-layout.js

如果我再次刷新页面，错误就会消失，

为什么会出现此错误？如何阻止此错误发生？

提前谢谢...

请求的路由管理器代码

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

错误发生在 ember-layouts.js 的第 126 行

 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();
   },

【问题讨论】：

你能添加你的RouteManager代码吗？
@louiscoquio RouteManager 代码按要求
这里没看出什么问题。你确定App.main是在RouteManager创建之前设置的，在body创建之后添加到body中的吗？如果您不知道，您可以添加插入 App.main 视图的主 html 页面吗？
@louiscoquio 是的 App.main 在之前，它在 RouteManager 创建后添加到 DOM 中，我一直在研究它，发现问题存在于 ember-layouts 中的以下行.js 见上面我不能在这里插入代码它说它是实验性的，所以我将不得不进一步挖掘代码以查看发生了什么，我认为所需的文件之一没有按时加载，我试图克服这个使用require.js的订单插件

标签： javascript ember.js

【解决方案1】：

发现这个问题，和ember-layouts无关，和require js有关。在文件的顶部，我不得不将 require 替换为 define，它在 require js api 文档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) {});

【讨论】：

【解决方案2】：

我遇到了同样的错误，但我没有使用 requirejs。

我认为我的问题是版本问题。我正在使用 ember-0.9.5.js。我已经搜索过，proto 功能似乎从这个版本中删除了。 proto() 确实存在于以前的版本中。

ember-layouts 在第 29 行显式调用此函数

  var layoutStates = viewClass.proto().layoutStates;

将此行更改为 this 似乎可以解决问题

var layoutStates = viewClass.prototype.layoutStates;

【讨论】：