javascript - 单例对象最有效的 Aurelia 绑定(bind)方式

Question

这是一个非常基础的 JavaScript 和 Aurelia 问题。

假设我有一个单例对象，例如 User，它经常从服务器获取更新，服务器返回一个全新的 User 对象。

现在，要将更新推送到 View ，我有两个选择(据我所知):

1. 手动将现有 User 的每个属性更新为新 User 的每个属性(这也需要映射每个属性)。

2. 替换对象引用并向所有监听器推送一个EventAggregator 通知以重新查询User 对象。

我目前选择了选项 1，它提出了一些问题，但没有任何阻碍。

哪个比另一个更有效和/或提供更多好处？

Answer 1

这是我的看法。您不必使用 EventAggregator，也不必费力更新每个属性。您可以创建辅助类(AppState 或其他)来保存您的User 对象。在您的元素中，注入(inject) AppState 类并创建一个 getter 函数以返回 User 对象(使用 @computedFrom 或 aurelia-computed 以避免脏检查)。例如:

JS

import { AppState, MyClass } from './app-state';
import { computedFrom } from 'aurelia-framework';

export class MyElement {

  static inject = [AppState];

  constructor(appState) {
    this.appState = appState;

  }

  @computedFrom('appState.obj')
  get obj() {
    return this.appState.obj;
  }

  updateObject() {
    this.appState.obj = new MyClass(); 
  }
}

HTML

<template>
  <h1>Element 1</h1>
  <button click.delegate="updateObject()">Update Object</button>
  <br><br>
  ${obj.p1} 
  <br><br><br>
  ${obj.p2}
</template>

运行示例 https://gist.run/?id=f2ed9769343513b0819115863ff64c34