Aurelia <compose> model.bind 什么触发了变化事件？

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 是在全局范围内。这样一来，如果我们离开路线然后 return 导航到路线，对 view.model 所做的任何更改都将保留。如果模型位于 ZenStudio 对象上，则当路线移开并 return 到此视图时对象将被销毁并重新创建，因此会丢失数据。

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-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 视图显示与 EditorView 相同的 model.message。当用户在 <input> 中编辑消息的值时，顶级视图以及相应的 <compose> 视图中的值会正确更改。

虽然我没有示例，但如果您将另一个项目添加到 openViews 列表中，则会添加另一个子视图和顶层视图中显示新消息的另一行。 repeat.for 侦听对列表所做的添加和减法，并正确地创建/删除组合元素。

希望这能回答您的问题。

Aurelia <compose> model.bind 什么触发了变化事件？

Aurelia <compose> model.bind what triggers a change event?

aurelia