【问题标题】:Ember JS: How to load a second model based on data from a firstEmber JS:如何根据第一个模型的数据加载第二个模型
【发布时间】:2014-04-04 14:19:13
【问题描述】:

我有一个 Ember 应用,它使用我们自己的自定义 AJAX 数据层与 API 对话,而不是使用 Ember Data。

我们可以使用 RSVP 一次加载两个模型 - 一个是通过我们的 API 包装器的 Project 对象,第二个是代表登录用户的对象。两者都被传递到控制器和模板中并且工作得很好。

但我需要根据返回的 Project 对象中的值加载第二个模型。

一旦我像这样在我的路线中加载了一个模型......

App.ProjectUpdateRoute = Ember.Route.extend({

    setupController: function(controller, model) {
        controller.set('model', model);
    },

    model: function(params) {

        return Ember.RSVP.hash({
            // Load Project from API - /myapi/v1/Project/:ProjectID
            Project : App.Project.create().findById(params.ProjectID),
            // Load current user from local object
            User : App.AuthUser,
        });
    },
});

...我有一个 Project 对象(或者更确切地说是 model.Project),它具有各种属性,包括拥有该项目的用户的 ID。

现在我想对/myapi/v1/User/:UserID 进行第二次 API 调用以获取用户的详细信息。

我尝试过的所有方法 - 包括在路由的 setupController 函数和控制器中添加更多 App.User.create().findById(UserID) 调用 - 会导致正确的 API 调用,但它是异步的,因此 Ember 继续呈现页面,我不能在页面上显示 API 调用的结果。

那么 - 如何以及在 Ember 结构中的哪个位置根据第一个模型的数据加载第二个模型?如何让 ember 等待第二个 AJAX 调用的已解决承诺?

更新

我也尝试过使用afterModel:function(),这几乎是我所需要的 - 它在应用程序流的正确位置进行第二次 API 调用,但我仍然需要将结果添加到我现有的model 数组:

afterModel: function(model, tranistion, params) {

    // Returns the promise but doesn't update 'model'
    return Ember.RSVP.hash({
        ProjectOwner : App.User.create().findById(model.Project.UserID)
    });
}

【问题讨论】:

    标签: ajax ember.js promise rsvp.js


    【解决方案1】:

    链接承诺,Ember 将获取最终结果(来自模型挂钩)

    model: function(params) {
    
      return Ember.RSVP.hash({
          // Load Project from API - /myapi/v1/Project/:ProjectID
          Project : App.Project.create().findById(params.ProjectID),
          // Load current user from local object
          User : App.AuthUser,
        }).then(function(results){
          return App.User.create().findById(results.Project.UserID).then(function(user){
            results.projectUser = user;
            return results;
          });
        });
    },
    

    【讨论】:

    • 虽然这个答案是正确的,但它使用了延迟反模式。您可以从.then 中简单地return results 然后返回它。如果你修复它,我很乐意拒绝 github.com/petkaantonov/bluebird/wiki/…
    • 虽然该 wiki 的部分内容在 RSVP 承诺方面不正确,但我同意可以更轻松地构建承诺。
    • 感谢您的更新。我删除了 -1 并投了赞成票。不错的答案:)
    猜你喜欢
    • 2021-12-18
    • 2017-05-23
    • 1970-01-01
    • 1970-01-01
    • 2021-12-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-08
    相关资源
    最近更新 更多