javascript - Ember，异步渲染嵌套模型集合

Question

免责声明:这里是 ember 新手，所以也许我问的问题太基本了，但我在网络上找不到对此的任何解释

我有一个父对象Report，其中包含Chart对象的集合。

当我加载 URL /api/reports/001/charts 时，会向 API 请求报告 001，然后是所有图表> 属于此报告，然后呈现所有内容，并在 .. 几秒钟后将页面显示给用户。

像这样:

我正在尝试提供更渐进的渲染:

1. 报告是从 API 加载的
2. 向用户显示的报告包含图表元素以及加载微调器
3. 每个图表均单独向 API 请求
4. 每个图表都会单独向用户显示

第 3 步和第 4 步对每个图表独立并行发生。

类似这样的事情:

当然，我不希望任何人向我提供完整的解决方案，我更多的是寻找方向，或者可能是一些可以找到灵感的链接。

Answer 1

我们正在仪表板上做类似的事情。在 route ，我们加载用户仪表板，其中包含小部件列表及其位置。然后在仪表板模板中，我们为每个小部件渲染组件，如下所示。

{{#each widgets as |widget|}}
  {{component widget.type widget}}
{{/each}}

然后，通过将小部件实例(具有自己的自定义设置)传递给组件，我们可以获取相关数据并显示它。每个小部件还可以有自己的“旋转器”来告诉用户它仍在加载。

如果我假设你的情况更简单一些，因为你只显示图表，并且可能通过某种 id 来显示，那么你可能无需使用组件帮助器并直接引用图表组件即可逃脱。

{{#each charts as |chart|}}
  {{report-chart chart.id}}
{{/each}}