使用 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.
  */
}