Question

当首先加载任何路由（windowsProdver除外）时，我可以在所有其他路由之间进行转换而不会出现任何问题。当通过URL直接调用windowsProdver然后通过linkTo或transitionToRoute调用另一个路由时，我只是在浏览器的javascript控制台的Uncaught TypeError: Cannot read property 'parentNode' of null中得到一个错误为ember.js:23544的空白页面。

据我所知，到目前为止，通过URL直接调用windowsProdver路由并切换到另一个路径（使用transitionToRoute或linkTo），应用程序模板被覆盖或销毁，因此新模板无法插入到应用程序中模板/ DOM。

windowsIndex应显示包含产品版本列表（'prodver'）
windowsProdver应显示在windowsIndex中选择的prodver或通过URL直接调用的特定统计信息

这些是我指定的路线：

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

结果是：

Screenshot of the routes created

路线：

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

申请模板：

{{view App.HeaderView}}

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

模板加载如下：

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

修改

我首先按以下方式进行路由：

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

但在阅读http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting上的文章后，我切换到了顶部代码中显示的路由。

Answer 1

我今天遇到了类似的问题，在我的应用中转换到路线并收到上述错误消息。然后我来到this discussion。就像它说的那样，我在我的车把模板中发现了一些格式错误的HTML，这给我带来了问题。现在我的应用程序在路线之间转换就好了我不确定这是否涵盖了您的所有问题，但我希望它有所帮助。

布赖恩

Answer 2

就我而言，我的嵌套模板包含脚本标记，例如，

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

...删除它修复了问题。

从动态段路由切换到其他路由时，将覆盖应用程序出口

2 个答案: