如何在Ember.js中迭代保存child条记录？

Question

我想使用 Ember 数据将一条 parent 记录和多条 child 记录保存到外部 REST API。我遇到的问题是我不确定异步处理此问题的最佳方法。

我的第一次尝试看起来像这样：

let parent = this.store.createRecord('parent');
parent.set('name', 'Bob');
parent.set('children', []);
parent.save().then(()=>{
  for (i=0;i<8;i++) {
    let child = this.store.createRecord('child');
    child.set('name', 'Child' + i);
    child.set('parent', parent);
    child.save().then(()=>{
      parent.get('children').pushObject(child);
      if (i == 7) {parent.save()}
    }
  }
})

这成功创建了 parent 和所有 children，但无法在 parent 的记录中保存所有 children 的 ID。并非所有 child.save() 承诺都在调用 parent.save() 时得到解决。

我知道 RSVP 是一个可用于解决此问题的库，但我找不到任何与我正在尝试做的事情相关的使用示例。

任何人都可以概述一下我如何重做以确保在尝试保存 parent 之前已保存所有 children 吗？

Answer 1

Ola @Bean，谢谢你的问题

正如@jelhan 在他的评论中提出的那样，这个问题的答案实际上取决于您的 API 可以支持的内容我将通过一些假设和概括来回答您的问题，但希望它会有用！

首先让我们明确一点，我将为 Parent 和 Child 定义模型，以便我们知道它是如何工作的。

// app/models/parent.js
import DS from 'ember-data';
const { Model, attr, hasMany } = DS;

export default Model.extend({
  name: attr(),
  children: hasMany('child'),
});

// app/models/child.js
import DS from 'ember-data';
const { Model, attr, belongsTo } = DS;

export default Model.extend({
  name: attr(),
  parent: belongsTo('parent'),
});

现在我们有了模型，我将设置一个 parent 和 8 个 children，就像你的例子一样，但在我的模型中，为了清楚起见，我将把保存分开:

// create 1 parent
let parent = this.store.createRecord('parent', {
  name: 'Bob'
});

// create 8 children
let children = [];

for (i=0;i<8;i++) {
  let child = this.store.createRecord('child', {
    name: 'Child' + i
  });

  children.push(child);
}

所以现在商店中将有 1 parent 和 8 children，但没有网络请求，因为我们还没有保存任何东西。

您现在有 2 个选项（取决于您的后端支持的内容）。您可以：

先保存Parent
在每个 children
保存每个children

或者您可以：

保存每个children
将parent的children数组设为child个模型的集合
保存 parent

我现在将在示例中介绍这两个选项。我使用 async-await 使其更易于阅读，因此请确保您正确使用它

// Save parent first
await parent.save();

let promises = children.map((child) => {
  child.set('parent', parent);
  return child.save();
})

await Promise.all(promises);

// Save children first
let promises = children.map((child) => {
  return child.save();
})

await Promise.all(promises);

parent.set('children', children);

await parent.save();

由于 ember-data 的工作方式，它应该会自动为您关联反向关系如果您想了解更多相关信息，可以查看官方 Ember 文档 https://guides.emberjs.com/release/models/relationships/#toc_explicit-inverses

如何在Ember.js中迭代保存child条记录？

How to iteratively save child records in Ember.js?

async-await

ember.js

ember-data

rsvp.js