4

当首先加载任何路由（除了 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"});
    });
});

结果是：

创建的路线的屏幕截图

路线：

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上的文章后，我切换到了顶部代码中显示的路由。

4

2 回答 2

1

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

布莱恩

于 2013-11-26T00:46:23.350 回答
0

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

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

...删除它解决了问题。

于 2014-06-10T21:27:16.130 回答