Ошибка при обработке маршрута: Не удается прочитать свойство «connectOutlet» в ember.js

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

UPDATE 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

Через некоторое время отладки я заметил, что элемент уголек 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; 
}); 

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