When switching from dynamic segments route to other route, application outlet is overwritten

Question

When any route (except windowsProdver) is loaded first, I can transition between all other routes without any problem. When windowsProdver is called directly by URL and then another route is called through linkTo or transitionToRoute, I just get a blank page with the error Uncaught TypeError: Cannot read property 'parentNode' of null in ember.js:23544 in the javascript console of the browser.

As far as I could see so far is, that on calling windowsProdver route directly via URL and switching to another route (with transitionToRoute or linkTo), the application template is overwritten or destroyed so the new template cannot be inserted into the application template / DOM.

windowsIndex should show general stats with a list of product versions ('prodver')
windowsProdver should show specific stats for the prodver chosen in windowsIndex or by direct call by URL

Those are the routes I have specified:

App.Router.map(function() {
    this.resource('serverversions', {path: '/serverversions'});

    this.resource('windowsIndex', {path: '/stats/windows'});
    this.resource('windowsProdver', {path: '/stats/windows/:prodver'});

    this.resource("users", {path: "users"}, function() {
        this.resource("users.user", {path: ":sernum"});
    });
});

The result is:

Screenshot of the routes created

The routes:

App.WindowsIndexRoute = Ember.Route.extend({
    model: function() {
        return App.StatsWindowsGeneral.get();
    }
});


App.WindowsProdverRoute = Ember.Route.extend({
    prodver: null,
    model: function(params) {
        if(params && params.prodver) {
            App.StatsWindowsGeneral.get();
            this.prodver = params.prodver;
            return $.getJSON(App.Config.api.url + "/stats/windows/" +    this.prodver).then(function(response) {
                // <some logic here>
                return response;
            });
        }
    }
});

application template:

{{view App.HeaderView}}

<div class="container">
    {{outlet}}
</div>

The templates are loaded like this:

var loaderObj = {
    templates: [
        'application.hbs',
        'loading.hbs',
        'header.hbs',
        'index.hbs',
        'serverversions.hbs',
        'serverversionsserver.hbs',
        'stats-index.hbs',
        'windowsIndex.hbs',
        'windowsProdver.hbs',
        'users.hbs',
        'user.hbs'
    ]
};
load_templates(loaderObj.templates);

function load_templates(templates) {
    $(templates).each(function() {
        var tempObj = $('<script>');
        tempObj.attr('type', 'text/x-handlebars');
        var dataTemplateName = this.substring(0, this.lastIndexOf('.'));
        dataTemplateName = dataTemplateName.replace(/\-/g, '/');
        console.log(dataTemplateName);
        tempObj.attr('data-template-name', dataTemplateName);
        $.ajax({
            async: false,
            type: 'GET',
            url: 'assets/templates/' + this,
            success: function(resp) {
                tempObj.html(resp);
                $('body').append(tempObj);
            }
        });
    });
}

EDIT

I first did the routing in the following way:

App.Router.map(function() {
    this.resource('serverversions', {path: '/serverversions'});
    this.resource('stats', {path: '/stats'}, function() {
        this.route('windows');
        this.route('windowsProdver', {path: '/windows/:prodver'});
    });

    this.resource("users", {path: "users"}, function() {
        this.resource("users.user", {path: ":sernum"});
    });
});

but after reading the article on http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting, I switched to the routing shown in the code at the top.

bk11425 bk11425 · Accepted Answer · 2013-11-26T00:46:23

I was having a similar issue today, transitioning to a route in my app and getting the aforementioned error message. Then I came upon this discussion. Like it says, I found some malformed HTML in my handlebar templates that caused the issue for me. Now my app transitions between routes just fine. I'm not sure if that covers all your issue, but I hope it helps.

Bryan

When switching from dynamic segments route to other route, application outlet is overwritten

2 Answers