如何降低Ember中模型挂钩的负载

Question

我有一个routes/paper.js文件，它有低于模型的挂钩

model(params,transition){
let user = store.getRequest('user','paper/user')
let address = store.getRequest('address','paper/address')
return RSVP.hash({
user,
address
}).then((model) => {
set(model, 'address_name', get(model.address, 'name'));
return ...model
})
}

我想通过将api请求移动到控制器并在setcontroller中使用它来减少模型钩子中的负载。但是模型没有数据，请在下面找到我的修改

//控制器/纸张.js

testerfunction(params){
let user = store.getRequest('user','paper/user')
let address = store.getRequest('address','paper/address')
let paperId = params.paperID
return RSVP.hash({
paperID: paperID,
user,
address
}).then((model) => {
set(model, 'address_name', get(model.address, 'name'));
return ...model
})
}

//routes/paper.js 

model(params,transition){
}

setupController(controller,model) {
testerfunction(get(this,'model.params');
}

但是我的页面呈现是空白

Answer 1

setupController的默认实现是：

setupController(controller, model) {
set(controller, 'model', model);
}

因此，您有两个选项，您可以使用_super调用默认实现，也可以重新实现它。还要注意，您需要使params成为从model钩子返回的对象的一部分。最后，您的testerfunction返回一个承诺。虽然model希望您返回承诺，但setupController没有。

model(params) {
return { params };
}
setupController(controller, model) {
return testerfunction(get(this, 'model.params')).then(resolvedModel => {
this._super(controller, resolvedModel);
});
}

有关setupController的更多信息，请参阅https://api.emberjs.com/ember/2.18/classes/Route/methods/setupController?anchor=setupController

我已经根据您的代码编写了与Ember2.x兼容的答案，但请在将来告诉我们您使用的是哪个版本的Ember。

Answer 2

我建议使用ember并发。你的路线最终会看起来像：

loadUser: task(function * () { return store.getRequest('user','paper/user') })
loadAddress: task(function * () { store.getRequest('address','paper/address') })
loadAddressName: task(function * (addressPromise) {
const address = yield addressPromise
return get(address, 'address_name')
})
model(params, transition) {
const address = this.loadAddress.perform()
const user = this.loadUser.perform()
const address_name = this.loadAddressName.perform(address)
return {
user,
address,
paperID: params.paperID
}
}

作为额外的奖励，您可以在控制器/模板中获得每个的加载状态，这样您就可以执行以下操作：

{{#unless model.user.isLoading}}
{{model.user.name}}
{{else}}
Some loading state
{{/unless}}

另一个选项是添加一个加载模板，该模板在加载模型挂钩时进行渲染。您只需要在主模板旁边添加一个名为your_template_name_loading.hbs的模板