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";
  }
}

编辑器视图视图和视图模型如下：

<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侦听对列表所做的添加和减少，并正确创建/删除组合元素。

希望能回答你的问题。

Aurelia <compose> model.bind触发变更事件的原因是什么？

1 个答案: