Aurelia compose - 父级未访问子元素 - 双向绑定无法返回父级答案

【问题标题】：Aurelia compose - Parent not accessing child elements - two-way bind not working back to parentAurelia compose - 父级未访问子元素 - 双向绑定无法返回父级
【发布时间】：2018-01-30 14:35:34
【问题描述】：

我有一个名为 client.html 的父级。

我有一个孩子叫 address.html。

我使用 compose 元素在父视图模型中显示子视图：

<compose view-model="../address/address" model.bind="client.address"></compose>

client.address 类型为 AddressDetails（如下）。

在客户端视图（address.ts）中，我使用激活函数从父级“client.Address”访问数据：

activate(model: AddressDetails) {
    if (model) {
        this.address.deserialize(model);
    }
}

我也试过了：

activate(model: AddressDetails) 
    this.address = model;
}

在 address.ts 中，我将我的对象设置为在 address.ts 中的绑定，如下所示：

export class Address {
    address = new AddressDetails;
    ...

将地址对象设置为模型，因为这会将地址指针设置为模型。

..我的 addressDetails 类（具有反序列化功能）是：

    export class AddressDetails implements Serializable<AddressDetails> {
        address1: string;
        address2: string;
        suburb: string;
        postcode: string;
        stateShortName: string;
        addressLocationId: number;

        deserialize(input) {
            console.log("INPUT: ", input)
            this.address1 = input.address1;
            this.address2 = input.address2;
            this.suburb = input.suburb;
            this.postcode = input.postcode;
            this.stateShortName = input.stateShortName;
            this.addressLocationId = input.addressLocationId;

            return this;
        }
    }

Address.html (child) 的一部分在下面显示了 Address1 的绑定：

<input type="text" value.bind="address.address1" class="form-control" id="address1" placeholder="Address 1st line...">

因此，当我将 client.address 传递给 compose 元素时，它会起作用，并且我会看到 client.address 填充的所有字段都显示在组合元素上。

因此数据会向下传递到子节点 (address.html)

但是，当需要保存数据时，我没有进行双向绑定。对于那些将 client.address 传递给地址视图/视图模型的实例，任何更改都不会在客户端（父级）上获取。它传递数据但不备份。

我已将模型设置为子代地址，但模型并未在父代中更新。

在传递数据对象时如何进行组合，使其以两种方式工作？

它是双向的吗？如果是这样，我做错了什么？

【问题讨论】：

标签： aurelia

【解决方案1】：

出于多种原因，Compose 并非旨在像真正的自定义元素一样工作。您可以做的是在父级中传递一个对象以进行组合，然后在您的子级中绑定该对象的属性：

<!-- parent template -->
<template>
  <compose model.bind="details"></compose>
</template>

<!-- child template -->
<template>
  Address:
  <input value.bind="details.address" />
  Postcode:
  <input value.bind="details.postcode" />
</template>

【讨论】：