Emberjs 2.0+ 使用来自存储的新数据更新路由模型（createRecord）

Question

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

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

（我想在调用 save 后用新记录 userRole 更新我的路线模型（userRoles 数组）（在强>创建记录））。

到目前为止，我有一个 route，它的 model 如下所示：

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()：here 和 here 或用于存储/更新数据的服务 (?)。

（也从使用 pushObject 更改为 addObject (v1.3+)；另外，监听 userRoles 更改的观察者不会被触发在组件内部，或者如果我调用 toArray() 我得到“无效值用作弱映射键”错误）

问题：用新项目更新我的路线模型并导致重新渲染我的模板的正确/Ember 方法是什么。如果我应该使用服务来获取数据，服务应该将所有项目保存在 toArray() 或 POJO 中吗？

Answer 1

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

因此，例如，您永远不应该这样做：

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

但总是这样：

newUserRole.set('user', user);

.save()ember-data 足够聪明，可以保存 id。

这看起来有点像您试图为给定用户加载所有userRoles：

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

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

user.get('roles'),

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

接下来使用currentModel.userRoles.addObject 修改余烬数据的结果数组。只有当你想改变关系时，你才应该这样做。 ember-data 将自动使您的关系保持同步。 因此，在userRole 上设置user 后，新角色将自动在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}} 之类的计算机属性。