0

我有一条加载仪表板的路线

// routes/dashboard/index.js
...
  model: function(params) {
    return this.store.find('dashboard', params.dashboard_id);
  }
...

仪表板模型包含与小部件模型的 hasMany 关系

// models/dashboard.js
...
DS.Model.extend({
  widgets: hasMany('widget', {async: true})
...

小部件模型包含与仪表板模型的 belongsTo 关系

// models/widget.js
...
DS.Model.extend({
  dashboard: belongsTo('dashboard', {async: true})
...

dashboard.index 模板使用 {{each}} 帮助器呈现小部件

// templates/dashboard/index.js
...
{{#each model.widgets as |widget|}}
  {{widget config="widget"}}
{{/each}}
...

用户可以将小部件添加到他们的仪表板

// routes/dashboard/index.js
...
actions: {
  addWidget: function() {
    this.store.createRecord('widget', {
      dashboard: this.modelFor('dashboard.index')
      ...
    });
  }
}

虽然这可行，但在创建新小部件时，所有小部件都会重新渲染。

一些值得注意的事情： - 我还没有实现视图或控制器。- 如果我将实现更改为仅返回一个小部件集合，导致 ember-cli 创建一个 ArrayController 而不是 ObjectController，则每个循环不会重新渲染（非常好）。但是，仪表板有多个需要呈现的子数组，因此我不能采用这种方法。- 尽管努力实现对象控制器并创建我自己的数组控制器，但我无法在这里获得相同的功能。

关于如何在不重新渲染所有小部件的情况下添加小部件的任何建议？

4

0 回答 0