When switching from the route of dynamic segments to another route, the application output is overwritten

Question

When any route (except WindowsProdver) is loaded first, I can go between all the other routes without any problems. When WindowsProdver is called directly by URL and another route is called via linkTo or transitionToRoute, I just get a blank page with an error Uncaught TypeError: Cannot read property 'parentNode' of nullin ember.js:23544the browser javascript console.

As far as I could guess, this is that when calling the windowsProdver route directly through the URL and switching to another route (using the ToRoute or linkTo transition), the application template is overwritten or destroyed, so the new template cannot be inserted into the template / DOM application.

• windowsIndex should show general statistics with a list of product versions ("prodver")
• WindowsProdver should show certain statistics for the prodver selected in WindowsIndex or by a direct call to the URL

These are the routes that I indicated:

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

Result:

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>

Templates are loaded as follows:

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

First I did the routing as follows:

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 http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting I switched to the routing shown in the code above.

Answer 1

, . . , HTML , . . , , , .

Answer 2

script, ,

<script type="text/x-handlebars" data-template-name="home"> 
   ...
</script>

... .