Ember无法加载双嵌套路由

时间:2013-11-06 17:03:30

标签: javascript ember.js handlebars.js

我现在正在使用一个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()
    }
});

然后错误就消失了。

这是最奇怪的部分。

如果我加载不同的页面,只需导航到服务页面......它就可以了。它加载模型就好了。它只是当我尝试刷新页面,或者将服务的URL直接放入浏览器时,它就会解决问题。

我在这个错误上阅读了各种各样的互联网帖子,但似乎没有一个符合我所看到的情况 - 尝试调整这个,那仍然没有。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

我想以下内容可以使其发挥作用:

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。您的映射说它应该使用routes模型的id来做。所以它试图获取未定义对象的id属性。

导航到服务页面时为什么会这样做?

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

我的解决方案如何运作?

您正在通过jQuery.getJSON进行异步调用。当您的代码到达模型挂钩的末尾时,此请求尚未完成,因此再次返回undefined。我转而许诺。 Ember正在等待这个承诺得到解决。我在jQuery.getJSON的回调中解析它。

PS:我不确定你对jQuery.getJSON的调用是否正确。是否必须调用成功函数。但我不是jquery专家,这可能是完全错误的: - )