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})
...

ウィジェット モデルには、ダッシュボード モデルへの属している関係が含まれています

// 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 が ObjectController ではなく ArrayController を作成するようになり、各ループは再レンダリングされません (優れています)。ただし、ダッシュボードにはレンダリングが必要な子配列が複数あるため、このアプローチを採用することはできません。- オブジェクト コントローラーを実装し、独自のアレイ コントローラーを作成しようとしても、ここで同じ機能を得ることができません。

すべてのウィジェットを再レンダリングせずにウィジェットを追加する方法について何か提案はありますか?

4

0 に答える 0