Emberjs 2.0+使用来自商店的新数据更新路线模型(createRecord)

时间:2016-11-16 16:57:25

标签: ember.js ember-data

我是Ember的新手,所以我的方法可能不正确。 我正在使用最新的Ember 2.9.1

我的计划是更新路线的模型,并使所有组件在集合中呈现新添加/保存的项目。

(我想在我打电话保存 userRole 记录更新我的路线模型( userRoles 数组) >(在 createRecord 上)。)

到目前为止,我的路径模型,如下所示:

model(){
  // this is my "user.edit" route
  let user = this.modelFor('user');
  let newUserRole = this.get('store').createRecord('userRole');
  newUserRole.set('user_id', user.get('id'));

  return RSVP.hash({
    user: user,
    userRoles: store.query('userRole', { user_id: user.get('id') }),
    roles: store.findAll('role'),
    newUserRole: newUserRole
  });
}

然后我有一个控制器和几个修改newUserRole的组件。 在路线中,我有一个保存新用户角色的操作:

actions: {
  saveNewUserRole: function () {
    let currentModel = this.modelFor('user.edit');
    currentModel.newUserRole.save().then(function (newUserRole) {
      currentModel.userRoles.addObject(newUserRole);
    });
  }
}

有趣的是,新项目(newUserRole)被添加到集合中,但在模型的控制台日志记录中告诉我新对象与集合中的其他对象有所不同。 看一下ember的类似问题,我发现人们使用: 用于存储/更新数据的 _internalModel toArray()herehere或服务(?)。

(也从使用 pushObject 改为 addObject (v1.3 +);加上监听 userRoles 的观察者不会改变在组件内部触发,或者如果我调用 toArray(),我会得到“用作弱地图键的无效值'错误”

问题:使用新项目更新路线模型的正确/ Ember方式是什么,以及重新渲染模板的原因。如果我应该使用数据服务,那么服务是否应该将所有项目保留在toArray()或POJO中?

1 个答案:

答案 0 :(得分:1)

ember-data会自动为你完成大部分丑陋的关系。

例如,你永远不应该做这样的事情:

newUserRole.set('user_id', user.get('id'));

但总是如此:

newUserRole.set('user', user);

.save() ember-data足够智能,可以保存ID。

这看起来有点像你试图为给定用户加载所有userRole

store.query('userRole', { user_id: user.get('id') }),

您应该只在必要时使用query。要获取关系,只需访问关系:

user.get('roles'),

假设您roles: hasMany('userRole')中有models/user-role.js

接下来使用currentModel.userRoles.addObject修改ember数据的结果数组。如果要更改关系,则只应执行此操作。 ember-data会自动保持您的关系同步。 因此,在user上设置userRole后,新角色将自动位于user.get('roles')返回的实时数组中。实际上你应该永远修改.query()返回的数组。

所以基本上这可能是你的model钩子:

// this is my "user.edit" route
let user = this.modelFor('user');
let newUserRole = this.get('store').createRecord('userRole', {
  user
});

return RSVP.hash({
  user,
  userRoles: user.get('roles'),
  roles: store.findAll('role'),
  newUserRole,
});

这可能是你的保存行动:

actions: {
  saveNewUserRole: function () {
    let currentModel = this.modelFor('user.edit');
    currentModel.newUserRole.save();
  }
}

但是,如果您只想在保存后显示新角色,则可能应该在查看isNew=false时对其进行过滤。用户可以使用userRolesFiltere: Ember.computed.filterBy('model.userRoles', 'isNew', false){{#unless role.isNew}}这样的计算机资源。