Javascript 处理路由时出错：无法读取属性'；连接插座'；在Ember.js中

将Ember升级到最新版本后，我遇到以下错误：

Error while processing route: portfolio Cannot read property 'connectOutlet'

每当我从以下位置导航时，就会发生此错误：

http://localhost:8080/#/portfolio

致：

奇怪的是，如果我多次刷新页面，有时会正常，有时会不正常，所以感觉有些文件加载得太晚，或者可能加载了两次

应用hbs

define(['Ember'], function (Ember) {
    "use strict";

    window.app = Ember.Application.create({
      LOG_TRANSITIONS: false, // basic logging of successful transitions
      LOG_TRANSITIONS_INTERNAL: false, // detailed logging of all routing steps
      LOG_VIEW_LOOKUPS: false // detailed logging of view resolution
    });

    // Delay the app's initialization . We will invoke advanceReadiness()
    // when are ready for the app to be initialized
    window.app.deferReadiness();

    return window.app;
});

require([
    'website/js/app',
    /* routes, views... */
], function (
  app,
  /* routes, views... */
  ){
    "use strict";

    // Configure Routes
    app.Router.map(routes);

    // Set Routes
    app.IndexRoute = indexRoute;
    // ...

    // Set Views
    app.IndexView = indexView;
    // ...

    // We're ready to launch the app!
    app.advanceReadiness();
});

应用程序视图呈现页眉、页脚和主容器，其中包含应用程序

{{outlet}

<!-- ... -->
<div class="container" id="maincontainer">
  <div class="maincontainer">
    {{outlet}}
  </div>
</div>
<!-- ... -->

我尝试了以下方法，但没有成功：

renderTemplate: function(){
    this.render({
        outlet: "main",
        into: "application"
    });
}

你对这个问题的根本原因有什么想法吗

整个应用程序源代码可以在

更新1

我一直在阅读Ember文档，我在我的应用程序模板中添加了

{{{outlet“main”}

，并尝试了以下方法：

renderTemplate: function() {
  this.render('blog', {           // the template to render
    into: 'application',          // the template to render into
    outlet: 'main'                // the name of the outlet in that template
  });
}

我一直在调试余烬代码，并实现了以下功能：

function appendView(route, view, options) {
  if (options.into) {
    var parentView = route.router._lookupActiveView(options.into);
    var teardownOutletView = generateOutletTeardown(parentView, options.outlet);
    if (!route.teardownOutletViews) { route.teardownOutletViews = []; }
    replace(route.teardownOutletViews, 0, 0, [teardownOutletView]);
    parentView.connectOutlet(options.outlet, view);
  } else {
    var rootElement = get(route.router, 'namespace.rootElement');
    // tear down view if one is already rendered
    if (route.teardownTopLevelView) {
      route.teardownTopLevelView();
    }
    route.router._connectActiveView(options.name, view);
    route.teardownTopLevelView = generateTopLevelTeardown(view);
    view.appendTo(rootElement);
  }
}

在上面的函数中，在行中：

var parentView = route.router._lookupActiveView(options.into);

变量

parentView

为

null

和

选项。into

为

“应用程序”

。因此，下面这行抛出了一个异常：

parentView.connectOutlet(options.outlet, view);

我已经定义了应用程序模板和视图，但没有定义应用程序路由，我不知道这是否是问题所在

---

谢谢

经过一段时间的调试后，我注意到ember

路由器.\u activeview

元素并不总是包含

应用程序

视图：

有效

define(['Ember'], function (Ember) {
    "use strict";

    window.app = Ember.Application.create({
      LOG_TRANSITIONS: false, // basic logging of successful transitions
      LOG_TRANSITIONS_INTERNAL: false, // detailed logging of all routing steps
      LOG_VIEW_LOOKUPS: false // detailed logging of view resolution
    });

    // Delay the app's initialization . We will invoke advanceReadiness()
    // when are ready for the app to be initialized
    window.app.deferReadiness();

    return window.app;
});

require([
    'website/js/app',
    /* routes, views... */
], function (
  app,
  /* routes, views... */
  ){
    "use strict";

    // Configure Routes
    app.Router.map(routes);

    // Set Routes
    app.IndexRoute = indexRoute;
    // ...

    // Set Views
    app.IndexView = indexView;
    // ...

    // We're ready to launch the app!
    app.advanceReadiness();
});

不起作用

我试图分析为什么会发生这种情况，因为正如我在问题中所说：

奇怪的是，如果我多次刷新页面，有时会 工作正常，有时感觉好像加载了某个文件 太晚了，或者可能加载了两次

我几乎可以肯定这与

require.js的使用和异步加载应用程序组件有关

解决方案是使用
deferReadiness（）
和
advanceReadiness（）
。这是我所做的，以防将来它能帮助别人

app.js

define(['Ember'], function (Ember) {
    "use strict";

    window.app = Ember.Application.create({
      LOG_TRANSITIONS: false, // basic logging of successful transitions
      LOG_TRANSITIONS_INTERNAL: false, // detailed logging of all routing steps
      LOG_VIEW_LOOKUPS: false // detailed logging of view resolution
    });

    // Delay the app's initialization . We will invoke advanceReadiness()
    // when are ready for the app to be initialized
    window.app.deferReadiness();

    return window.app;
});

require([
    'website/js/app',
    /* routes, views... */
], function (
  app,
  /* routes, views... */
  ){
    "use strict";

    // Configure Routes
    app.Router.map(routes);

    // Set Routes
    app.IndexRoute = indexRoute;
    // ...

    // Set Views
    app.IndexView = indexView;
    // ...

    // We're ready to launch the app!
    app.advanceReadiness();
});

main.js

define(['Ember'], function (Ember) {
    "use strict";

    window.app = Ember.Application.create({
      LOG_TRANSITIONS: false, // basic logging of successful transitions
      LOG_TRANSITIONS_INTERNAL: false, // detailed logging of all routing steps
      LOG_VIEW_LOOKUPS: false // detailed logging of view resolution
    });

    // Delay the app's initialization . We will invoke advanceReadiness()
    // when are ready for the app to be initialized
    window.app.deferReadiness();

    return window.app;
});

require([
    'website/js/app',
    /* routes, views... */
], function (
  app,
  /* routes, views... */
  ){
    "use strict";

    // Configure Routes
    app.Router.map(routes);

    // Set Routes
    app.IndexRoute = indexRoute;
    // ...

    // Set Views
    app.IndexView = indexView;
    // ...

    // We're ready to launch the app!
    app.advanceReadiness();
});

您是否尝试将您的outlet命名为“main”或只是从呈现方法中删除outlet属性？@Vaibhav感谢您的建议，我已经添加了一个更新的问题，并提供了更多详细信息。请查看，我希望它能更容易地帮助我。