时间戳

首页 > 解决方案 > 如何在 Ember 中减少模型钩子的负载

ember.js - 如何在 Ember 中减少模型钩子的负载

问题描述

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

//控制器/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');
}

但我的页面渲染是空白的

标签： ember.js

解决方案

我建议使用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}}

另一种选择是添加在模型钩子加载时呈现的加载模板。您只需在主模板旁边添加一个名为your_template_name_loading.hbs

推荐阅读