处理路由时出错：无法在 Ember.js 中读取属性“connectOutlet”

Question

将 Ember 升级到最新版本后出现以下错误：

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

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

http://localhost:8080/#/portfolio

到：

http://localhost:8080/#/publications

奇怪的是，如果我多次刷新页面，有时它会起作用，而有时它却不像某些文件加载​​得太晚或可能加载了两次。

aplication.hbs

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

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

index.hbs

我的索引视图呈现几个子视图：

<div class="jumbotron fadeInUp animated">
    <div class="row">
        <div id="summary_content">
            {{view view.CvSummaryView}}
        </div>
    </div>
</div>

路线 在我所有的路线中，我只添加了model() 函数。我不会覆盖renderTemplate() 或其他任何东西。

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

        return Ember.Route.extend({
            model: function()
            {
                var result = {};

                $.ajax({
                    async: false,
                    dataType: "json",
                    url: './website/js/models/portfolio.json',
                    success: function(data){
                        result.portfolio = data;
                    }
                });

                return result;
            }
        });
    }
);

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

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

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

整个应用源代码可以在https://github.com/remojansen/remojansen.github.io/tree/master/website/js找到

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

我一直在调试 Ember 代码，我达到了这个功能：

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 和options.into 是"application"。所以下面这行会抛出异常：

parentView.connectOutlet(options.outlet, view);

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

谢谢！

Answer 1

经过一段时间的调试，我注意到 ember router._activeViews 元素并不总是包含 application 视图：

作品

不起作用

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

奇怪的是，如果我多次刷新页面，有时它 有效，有时感觉不像加载了某些文件 太晚了，或者可能加载了两次。

我几乎可以肯定这与 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;
});

ma​​in.js

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