CODEWITHSUNDEEP
typescriptaurelia
SNO
SNO

Reputation: 876

Aurelia binding for custom elements

currently I'm facing the following challange using aurelia:

Following my user-model:

export class User{
    @bindable name: string;
    @bindable address: Address;

I have a layout view-model including a form:

Parent UserRegistration JS

export class UserRegistration{
    @bindable user: User

    public registerUser(){
        let address = this.user.address;
        //register user and so on ...
    }
}

Parent UserRegistration template

<template>
    <require from="user-address"></require>    

    <form id="user-registration-form" submit.delegate="registerUser()>
        <user-adress user.bind="user"></user>
    </form>
</template>

and then I have a custom-element:

CustomElement userAddress JS

@customElement('userAddress')
@autoinject
export class userAddress{
      @bindable user: User;
}

CustomElement userAddress template:

<template>
    <input type="text" id="street-name" value.bind="user.address.streetname" />
</template>

Now I want, that clicking on submit, the information from custom-element "user-address" are taken over into the layout view-model so that I can use it in "registerUser()".

Can anyone tell me, how I can get that working? Currently, I only get a "undefined" in parent view-model.

Upvotes: 1

Views: 590

Answers (2)

Alexander Taran
Alexander Taran

Reputation: 6725

the default binding mode for this
<user-adress user.bind="user"></user>
will be one-way..

you have to change it to
<user-adress user.two-way="user"></user>

that should do

to keep in touch with aurelia community, join the aurelia forums https://discourse.aurelia.io/
and gitter channel https://gitter.im/aurelia/Discuss

Upvotes: 4

Jesse
Jesse

Reputation: 3642

You need to use two-way binding. Your current situation, using user.bind only binds one-way, meaning that if you edit the binding in the child it will not update in the parent.

If you bind the value like so:

<user-address user.two-way="user"></user>

Any changes that you make to the user in the user-address element will also update the user in the parent viewmodel.

Upvotes: 4

Related Questions