Javascript 余烬嵌套路线和承诺

当使用嵌套路由直接访问余烬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时发生：

---

谢谢。

根据我对你问题的评论，这应该可以解决问题。注意，模型钩子可以返回一个承诺，而setupController不应该返回任何东西

下面是一个JSBin，它尝试与您的项目对应-显然，数据是不同的：

确保您也在外部查看它：

---

这是一个猜测，但您可以尝试这样做。controllerFor'project'。获取'model'。然后在您的文件路由中获取FunctionProjectModel{…}。谢谢您的建议，Jamie，但这不起作用。处理路由时出错：文件无法读取null类型的属性'then'。错误：无法读取null类型的属性'then'。我认为您不应该使用setupController，而应该像使用IndexRoute一样使用模型挂钩。模型钩子被传递给params，您可以使用它来获取传递的projectId。当我用模型函数替换setupControler函数时，链接停止工作。我错过什么了吗？还有这个.controllerFor'project'。获取'model'；这不是一个承诺。谢谢。@Elie，我的错。改为使用var projectPromise=this.modelFor'project'；我已经编辑了我的答案，并加入了一个JSBin，试图证明它是有效的。你知道吗，现在我在JSBin中有了这个-如果你的{{outlets}设置正确，一切都应该正常。Ember应该在加载FileRoute之前等待项目解决。这里是另一个简化的JSBin：谢谢Jamie。我实际上意识到，如果使用{{{link to'project'project}}，则永远不会调用模型函数。Ember将假定模型是project，不会尝试通过API重新加载它。我还没有弄明白如何在使用{{link to}}时强制Ember从API加载模型，但这是另一个问题。与其传递project pass project.id，Ember应该调用模型挂钩。

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