单例对象最有效的 Aurelia 绑定方式答案

【问题标题】：Most efficient Aurelia binding way for a singleton object单例对象最有效的 Aurelia 绑定方式
【发布时间】：2017-03-08 21:37:54
【问题描述】：

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

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

现在，要将更新推送到视图，我有两个选择（据我所知）：

手动将现有User 的每个属性更新为新User 的属性（这也需要映射每个属性）。
替换对象引用并推送EventAggregator通知，让所有监听器重新查询User对象。

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

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

【问题讨论】：

标签： javascript data-binding binding aurelia

【解决方案1】：

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

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

【讨论】：

这是一个很棒的想法，我明天一定会尝试一下，看看它是否适合我目前的结构。 :)