Ember 嵌套路由和承诺

Question

当直接使用嵌套路由访问 ember URL 时，应用程序不会在加载嵌套资源之前等待父承诺解析。

这是一个示例代码：

var App = Ember.Application.create();

App.Router.map(function () {
    this.resource('index', {path: "/"}, function () {
        this.resource('project', {path: "/project/:id"}, function () {
            this.resource('file', {path: "/file/:encodedPath"});
        });
    });
});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return Ember.$.getJSON('/list-projects');
    }
});

App.ProjectRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        return Ember.$.getJSON('/load-project?id=' + model.id).then(
                function (data) {
                    controller.set('model', data);
                });
    }
});

App.FileRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        var project = this.modelFor('project');
        var url = '/load-file?project=' + project.id + '&path=' + model.encodedPath;

        return Ember.$.getJSON(url).then(
            function (data) {
                controller.set('model', data);
            });

    }
});

是否可以等项目数据解析后再加载文件数据？

只有在浏览器中直接加载 URL 时才会出现此问题： http://mywebsite.com/#/project/1234/file/test.txt

谢谢。

Answer 1

根据我对您问题的评论，这应该可以解决问题。注意 model 钩子可以 return 一个 Promise 而 setupController 不应该 return 任何东西。

这里有一个 JSBin 尝试与您的项目相对应 - 显然数据不同： http://emberjs.jsbin.com/letalehoje/1/edit?html,js,console,output

确保您也从外部查看它： http://emberjs.jsbin.com/letalehoje/1/#/project/1/file/text1-1.txt

App.ProjectRoute = Ember.Route.extend({
    model: function(params) {
        return Ember.$.getJSON('/load-project?id=' + params.id);
    }
});

App.FileRoute = Ember.Route.extend({
    model: function(params) {
        var projectPromise = this.modelFor('project');

        return Ember.RSVP.resolve(projectPromise).then(function(project) {
            // this is the promise that should be returned for the FileRoute model
            return Ember.$.getJSON('/load-file?project=' + project.id + '&path=' + params.encodedPath);
        });
    }
});

Ember 嵌套路由和承诺

Ember nested routes and promises

javascript

ember.js