Question

目前我正在使用aurelia面对以下挑战：

关注用户模型：

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

我有一个布局视图模型，包括一个表单：

Parent UserRegistration JS

export class UserRegistration{
    @bindable user: User

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

父用户注册模板

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

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

然后我有一个自定义元素：

CustomElement userAddress JS

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

CustomElement userAddress模板：

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

现在我想，点击提交，来自custom-element“user-address”的信息将被接收到布局视图模型中，以便我可以在“registerUser（）”中使用它。

任何人都可以告诉我，我怎么能这样做？目前，我只在父视图模型中获得“未定义”。

Answer 1

您需要使用双向绑定。您当前的情况，使用user.bind仅绑定单向，这意味着如果您编辑子绑定，它将不会在父级中更新。

如果你像这样绑定值：

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

您对user元素中user-address所做的任何更改也会更新父视图模型中的user。

Answer 2

这个的默认绑定模式 <user-adress user.bind="user"></user>
将是单向的..

您必须将其更改为
<user-adress user.two-way="user"></user>

应该做

与aurelia社区保持联系，加入aurelia论坛https://discourse.aurelia.io/
和gitter频道https://gitter.im/aurelia/Discuss

Aurelia绑定自定义元素

2 个答案: