返回异步EmberJS路由的承诺字典

Returning dictionary of Promises for asynchronous EmberJS route

本文关键字：承诺 字典 路由 异步 EmberJS 返回      更新时间：2023-09-26

我正在学习如何将Ember承诺与异步路由一起使用，在这里有点磕磕磕绊。如果我这样写我的路由:

App.ActivitiesRoute = Ember.Route.extend({
    model: function() {
        return getClient().getActivities()
    }
});

其中getActivities()返回Ember.RSVP.Promise类型，我可以在模板中使用:

{{#each activity in model}}

然而，我宁愿不让我的整个基本模型存在于单个属性中。当我尝试这个:

App.ActivitiesRoute = Ember.Route.extend({
    model: function() {
        return {
            activities: getClient().getActivities()
        }
    }
});

然后把模板改成:

{{#each activity in model.activities}}

我收到一个错误信息:

"Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {_id: 82, _label: undefined, _state: undefined, _result: undefined, _subscribers: }"

和我不知道如何返回一个命名的承诺集合，可以在我的模板中单独访问。

model需要返回一个promise，以便基于promise的转换机制工作属性。你没有回报承诺;返回承诺的散列，这是完全不同的事情。您可以返回一个哈希值承诺，当它的所有单个键都满足Ember.RSVP.Promise.hash时，该承诺实现:

model() {
  return Ember.RSVP.Promise.hash({
    activities: getClient().getActivities()
  });
}

这个承诺将解析为一个看起来像{ activities: activities }的哈希。记住，在其他条件相同的情况下这就是控制器的model属性。因此，在控制器和模板中，您现在需要引用model.activities。

如果您想等待几个异步调用(例如多个this.store调用)在转换进行之前完成，您可以在模型钩子中使用相同的散列方法:

model() {
  return Ember.RSVP.Promise.hash({
    activities: getClient().getActivities(),
    toys: this.store.findQuery('toy', type })
  });
}

，然后将"main"设置为setupController:

中控制器上的model。
setupController(controller, model) {
  controller.set('model', model.activities);
}

在某些情况下，更简单的方法是在model钩子中检索主模型，并使用afterModel检索并等待辅助模型。

相关文章：