Aurelia binding for custom elements

Question

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.

There are a few typo's in your code, for example `` (should be ``). Are these in your code as well or did you copy them to SO wrong? — Jesse, Mar 14 '18 at 08:44
FYI you can actually set the default binding mode on a bindable (just pass arguments to the decorator). This enables you to keep in the spirit of Aurelia and use the expected convention for `bind` instead of being explicit. — Charleh, Mar 14 '18 at 13:52

score 4 · Answer 1 · answered Mar 14 '18 at 08:48

4

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.

answered Mar 14 '18 at 08:48

Jesse

3,522
6
25
40

1

nice timing (-: – Alexander Taran Mar 14 '18 at 08:50
Only 32 seconds off ;-) – Jesse Mar 14 '18 at 17:18

score 4 · Accepted Answer · answered Mar 14 '18 at 08:49

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

Aurelia binding for custom elements

2 Answers2