CODEWITHSUNDEEP
aurelia
si2030
si2030

Reputation: 4035

Aurelia compose - Parent not accessing child elements - two-way bind not working back to parent

I have a parent called client.html.

I have a child called address.html.

I display the child in the parent view-model using a compose element:

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

client.address type is AddressDetails (below).

in the client-view (address.ts) I access the data from the parent - "client.Address" using the activate function:

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

I also tried:

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

in address.ts I set my object for binding in address.ts as follows:

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

to set the address object to the model as this sets the pointer of address to model.

..and my addressDetails class (which has the deserialize function) is:

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

part of Address.html (child) is below showing the bind for Address1:

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

So when I pass client.address to the compose element it works and I get all the fields that client.address have filled showing up on the composed element.

so data travels down to the child (address.html)

However, when it comes time to save the data I do not get two way binding. For those instances where client.address was passed to the address view/viewmodel any change is not picked up on the client (the parent). Its passing the data down but not back up.

I have set model to address in the child however the model is not being updated back in the parent.

How do you do composition when passing data objects so that it works two ways?

does it go both ways? What have I done wrong if so?

Upvotes: 0

Views: 662

Answers (1)

bigopon
bigopon

Reputation: 1964

Compose is not designed to work like a real custom element, for many reasons. What you can do is to pass an object in parent to compose and then bind with property of that object in your children:

<!-- 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>

Upvotes: 0

Related Questions