余烬 无法加载双嵌套路由

Ember Cannot load a double nested route

本文关键字：嵌套 路由 加载 余烬      更新时间：2023-09-26

我现在正在开发一个 ember js 应用程序，并且有一个具有路由结构的应用程序：

App.Router.reopen({
    rootURL: '/gui/'
});
App.Router.map(function() {
    this.route("about", { path: "about"})
    this.resource("tenant", { path: ":id" }, function() {
        this.resource("dossier", { path: "dossiers/:id"}, function() {
            this.resource("resource", { path: "resources/:id"}, function() {
                this.resource("service", { path: "services/:id"});
            });
        });
    })
});

现在，在最深层次的模型（服务）上，当我尝试通过键入 URL 加载服务时，它会失败。所以，如果我去，例如， http://localhost:8080/gui#/8080/dossiers/8080/resources/8080/services/8080，我收到一个错误：

Assertion failed: Cannot call get with 'id' on an undefined object.

我想，也许是我生成模型的代码有问题，但我删除了所有这些代码，将模型保留为裸函数，只是为了看看，它仍然给出这个错误。但是，如果我从路由中完全删除模型代码，它将加载页面而不会抱怨。所以，这个：

App.ServiceRoute = Ember.Route.extend({
    model: function(params) {},
    renderTemplate: function() {
        this.render('service', {
            into: 'application'
        });
        this.render()
    }
});

引发错误。与原始代码一样：

App.ServiceRoute = Ember.Route.extend({
    model: function(params) {
        tenantModel = this.modelFor('tenant');
        dossierModel = this.modelFor('dossier');
        resourceModel = this.modelFor('resource');
        dossier_url = "/api/" + tenantModel.id + "/dossier/" + dossierModel.tag
        url = dossier_url + "/resources/" + resourceModel.name + "/services/" + params.id
        return jQuery.getJSON(url).then(function(data){
            data
        });
    },
    renderTemplate: function() {
        this.render('service', {
            into: 'application'
        });
        this.render()
    }
});

但是，如果我像这样取出模型： 

App.ServiceRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('service', {
            into: 'application'
        });
        this.render()
    }
});

然后错误消失。

这是最奇怪的部分。

如果我加载不同的页面，然后只是导航到服务页面......它有效。它可以很好地加载模型。只是如果我尝试刷新页面，或者将服务的网址直接放入浏览器中，它就会消失。

我

阅读了有关此错误的各种互联网帖子，但似乎没有一个与我所看到的情况相匹配 - 尝试调整这个和那个，仍然什么都没有。有什么想法吗？

我想

以下内容可以使它工作：

App.ServiceRoute = Ember.Route.extend({
    model: function(params) {
        tenantModel = this.modelFor('tenant');
        dossierModel = this.modelFor('dossier');
        resourceModel = this.modelFor('resource');
        dossier_url = "/api/" + tenantModel.id + "/dossier/" + dossierModel.tag
        url = dossier_url + "/resources/" + resourceModel.name + "/services/" + params.id
        var promise = Ember.Deferred.create();
       jQuery.getJSON(url).then(function(data){
            promise.resolve(data);
        });
        return promise;
    },
    ....
});

关于您的问题的一些评论：

为什么它说："断言失败：无法在未定义的对象上使用'id'调用get。

在您的示例中，模型挂钩的实现不执行任何操作。所以返回值是未定义的。调用模型钩子后，Ember似乎尝试再次更新URL。您的映射表明它应该使用路由模型的 id 执行此操作。因此，它尝试获取未定义对象的 id 属性。

为什么它在导航到服务页面时有效？

我想在这种情况下，您正在使用{{link-to}}助手或调用transitionTo为您的路线提供模型。如果要提供模型，则不需要调用路由的模型挂钩。当您通过 URL 输入应用程序时，必须执行模型钩子。

我的解决方案如何工作？

您正在通过jQuery.getJSON进行异步调用。当您的代码到达模型挂钩的末尾时，此请求尚未完成，因此再次返回 undefined。相反，我回报了一个承诺。余烬正在等待这个承诺得到解决。我正在jQuery.getJSON的回调中解决它。

PS：我不确定你对jQuery.getJSON的调用是否正确。它不必调用成功函数吗？但我不是jquery专家，这可能是完全错误的：-）

相关文章：