使用 View ViewModel 和 Model 进行构建

将 compose 与 View，ViewModel 和 Model 结合使用是一种重用和组合不同 Views 和 ViewModel 的简便方法。

给定以下 View 和 ViewModel（适用于下面的每个替代）：

SRC / greeter.html

<template>
    <h1>Hello, ${name}!</h1>
</template>

SRC / greeter.ts

export class Greeter {
    name: string;

    /* The object that is bound to the model property of the compose element,
       will be passed into the ViewModel's activate method
    */
    activate(model) {
        this.name = model.name;
    }
}

1 - 基本用法，内联模型 ：

SRC / app.html

<template>
  <compose view="./greeter.html" view-model="./greeter" model="{name: 'Rob'}"></compose>
</template>

SRC / app.ts

export class App {
}

2 - 基本用法，数据绑定模型 ：

SRC / app.html

<template>
  <compose view="./greeter.html" view-model="./greeter" model.bind="model"></compose>
</template>

SRC / app.ts

export class App {
  model = {
    name: Rob"
  };
}

3 - 模型属性更改时更新 DOM ：

第二种方法的唯一缺点是没有观察到 model 的属性，因此任何更改它们都不会传播到 DOM。

解决这个问题的一种方法是确保 model 属性在其任何属性发生变化时发生变化。这将导致 compose 元素被重新编译：

SRC / app.html

<template>
  <compose view="./greeter.html" view-model="./greeter" model.bind="model"></compose>
  <input type="text" value.two-way="name">
</template>

SRC / app.ts

import { computedFrom } from "aurelia-framework";

export class App {
  name: string;
  
  @computedFrom("name")
  get model() {
    return {
      name: this.name
    };
  }

  /* Using computedFrom prevents "dirty checking" and is optional,
     but highly recommended for performance reasons.

     Simply pass an array with names of all properties you wish to "observe".
     Expressions / nested properties are not supported.
  */
}