Aurelia <compose> model.bind 是什么触发了 change 事件？

Question

在 Aurelia 中，我们能够使用 <compose> 元素动态组合视图模型和视图。我们还可以通过model.bind 提供一个数据对象，然后可以通过提供的视图模型的activate 方法访问该对象。

我的问题是，什么条件会触发提供的模型数据的更改事件？如果我更改了我提供的对象的属性，我的activate 方法会将此对象作为第一个参数看到更改吗？还是需要替换整个对象才能触发更改？

Answer 1

当模型绑定到视图模型时，activate(model) 会被调用一次。当模型属性发生变化时，这些变化将反映在组合视图模型中，因为模型是参考，而不是副本。

例如，假设我有一个视图/视图模型，它是如下路线的目标（这个例子不是一个完全干净的例子，因为我也在尝试其他东西，但它应该足够清楚）：

视图：此视图创建由<hr> 分隔的两个部分。顶部仅显示每个视图的model.message。底部为每个视图创建一个<compose>。

<template>
  <div repeat.for="view of openViews">
    <p>${view.model.message}</p>
  </div>
  <hr>
  <div repeat.for="view of openViews">
    <compose view-model.bind="$parent.getViewFromType(view)" model.bind="view.model">
    </compose>
  </div>
</template>

查看模型：请注意，openViews 位于全局范围内。这样，如果我们离开路线然后返回路线，对view.model 所做的任何更改都将保留。如果模型位于 ZenStudio 对象上，则当路线移开并返回此视图时，该对象将被销毁并重新创建，因此会丢失数据。

var openViews = [
  { viewType: "", model: { message: "View 1"}},
  { viewType: "", model: { message: "View 2"}},
  { viewType: "", model: { message: "View 3"}}
];

export class ZenStudio {
  constructor() {
  }

  created() {
  }

  get openViews() {
    return openViews;
  }

  getViewFromType(view) {
    // TOOD Load plugins and use the views defined by plugins
    return "./views/editor-view";
  }
}

editor-view view和view-model如下：

<template>
  <h1>${model.message}</h1>
  <form>
    <input type="text" value.bind="model.message">
  </form>
</template>

视图模型：

export class EditorView {
  constructor() {
  }

  created(owningView, thisView) {
    this.view = thisView;
    this.parentView = owningView;
  }

  activate(model) {
    // Keep track of this model
    this.model = model;
  }
}

您会看到ZenStudio 视图显示的model.message 与EditorView 相同。当用户在<input> 中编辑消息的值时，这些值会在顶级视图以及相应的<compose> 视图中正确更改。

虽然我没有示例，但如果您在openViews 列表中添加了另一个项目，那么这将在显示新消息的顶级视图中添加另一个子视图和另一行。 repeat.for 监听列表中的加法和减法并正确创建/删除组合元素。

希望能回答你的问题。