ember.js 如何降低Ember中模型钩的载荷

x6492ojm  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(162)

我有一个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中使用它来减少模型钩子中的负载。但是模型没有数据,请在下面找到我的修改。
//controller/paper.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');
}

但是我页面呈现器是空白的

0md85ypi

0md85ypi1#

setupController的默认实现为:

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

因此,你有两种选择,你可以使用_super调用默认实现,或者你可以重新实现它。还要注意,你需要使params成为从model钩子返回的对象的一部分。最后,你的testerfunction返回一个promise。而model希望你返回一个promise,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
我已经写了这个答案是兼容的Ember 2.x基于您的代码,但请在未来让我们知道哪个版本的Ember您正在使用.

c0vxltue

c0vxltue2#

我建议使用ember-concurrency。您的路线最终将看起来像这样:

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

另一个选择是添加一个加载模板,在加载模型挂钩时呈现该模板。

相关问题