Aurelia - 使用组件

Question

我是 Aurelia 框架的新手，这是一个常见且受欢迎的场景： 我有一个容器（视图模型和视图），由一组项目填充（让我们称之为用户帐户屏幕，应该包含一组用户帐户）。 容器使用生成用户帐户数据集合的服务。

我有一个视图和一个视图模型绑定在一起并代表一个用户帐户 - 我希望容器使用用户帐户视图模型发送一个参数（用户帐户数据） ） - 用户帐户将接收数据并将其设置为其属性，因此可以绑定到视图 目的是用户帐户视图模型将在构造函数或激活中接收数据（我认为这是优先的）。

Answer 1

我通过在compose元素中使用model.bind属性来解决这个问题。

Answer 2

您可以使用简单的数据绑定来完成此任务。绑定数据可用于组件中的绑定。

以下是一个示例：https://gist.run?id=a8f11e779253a1c6abb44dbec77a8b83

帐户-在info.html

<template>
    Hello ${data.name}!
</template>

帐户-info.js

import {bindable} from 'aurelia-framework';

export class AccountInfo {
  @bindable data;
}

<强> app.html

<template>
  <require from="./account-info"></require>

  <div><input type="text" value.bind="userData.name" /></div>
  <account-info data.bind="userData"></account-info>
</template>

<强> app.js

export class App {
  userData = {
    name: 'Ashley'
  }
}