自定义元素的 Aurelia 绑定答案

【问题标题】：Aurelia binding for custom elements自定义元素的 Aurelia 绑定
【发布时间】：2018-03-14 08:40:07
【问题描述】：

目前我使用 aurelia 面临以下挑战：

按照我的用户模型：

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

我有一个包含表单的布局视图模型：

父 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 用户地址 JS

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

CustomElement 用户地址模板：

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

现在我想要，点击提交，来自自定义元素“用户地址”的信息被接收到布局视图模型中，以便我可以在“registerUser()”中使用它。

谁能告诉我，我怎样才能让它工作？目前，我在父视图模型中只得到一个“未定义”。

【问题讨论】：

您的代码中有一些错字，例如<user-adress>（应该是<user-address>）。这些是否也在您的代码中，或者您是否将它们复制到错误的地方？
仅供参考，您实际上可以在可绑定对象上设置默认绑定模式（只需将参数传递给装饰器）。这使您能够保持 Aurelia 的精神，并使用 bind 的预期约定而不是明确的。

标签： typescript aurelia

【解决方案1】：

这个的默认绑定模式
<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

【讨论】：

【解决方案2】：

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

如果你像这样绑定值：

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

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

【讨论】：

好时机（-:
只有 32 秒关闭 ;-)