Aurelia 自定义元素中的 2 路数据绑定 - 将自定义元素绑定到父视图模型

Question

在我的应用程序中，我做了很多“服务”，我可以将它们注入到我的视图模型中以节省冗余和时间。

现在我希望更进一步，制作这些表单元素（选择、文本、复选框 - 初学者的选择下拉菜单）并将它们转换为自定义元素，仅在自定义元素中注入服务。

我可以让它在某种程度上发挥作用。当我在“父”视图中需要它时显示自定义元素（在本例中为选择），但是当我更改自定义选择元素的选定值时，它不会绑定到“父”视图模型，这是我的要求.

我希望能够通过其模板中的 bind 属性将我从自定义元素中选择的值绑定到“父”视图模型上的属性。

我会在几分钟内更新哪个小代码sn-p。

create.js（我称之为父视图模型）

import {bindable} from 'aurelia-framework';
export class Create{
    heading = 'Create';
    @bindable myCustomElementValue = 'initial value';
}

create.html（父视图）

<template>
    <require from="shared/my-custom-element"></require>
    <my-custom selectedValue.bind="myCustomElementValue"></my-custom>
    <p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p>
</template>

我的自定义.js

import { inject, bindable} from 'aurelia-framework';
import MyService from 'my-service';

@inject(MyService )
export class MyCustomCustomElement {
    @bindable selectedValue;

    constructor(myService ) {
        this.myService = myService ;
    }

    selectedValueChanged(value) {
        alert(value);
        this.selectedValue = value;
    }

    async attached() {
        this.allSelectableValues = await this.myService.getAllValues();
    }
}

最初发生的情况是 create.html 视图输出“初始值”，当我更改自定义元素选择的值时，新选择的值会被警告出来，但它不会更新绑定的父变量，即仍然只是显示“初始值”。

Answer 1

这里有几个问题：

1. 由于不区分大小写，您需要对 DOM 中的任何属性名称进行kebab-case

   selected-value.bind="property"

   不是

   selectedValue.bind="property"

2. 您需要双向绑定。使用装饰器创建@bindable 时，其中一个参数是BindingMode，用于设置默认绑定模式。

   Aurelia 设置了一些合理的默认值，例如input value.bind=".." 的默认值是两种方式而不是明确的

   如果您不想设置默认绑定模式，您可以明确地使用您的绑定：

   selected-value.two-way="prop"

希望这会有所帮助:)

编辑：我认为这个答案后 API 发生了一些变化。

@bindable 装饰器具有以下标志：

bindable({
  name:'myProperty',
  attribute:'my-property',
  changeHandler:'myPropertyChanged',
  defaultBindingMode: bindingMode.oneWay,
  defaultValue: undefined
})

查看快速参考的最佳位置之一是文档中的 Aurelia 备忘单：

http://aurelia.io/docs/fundamentals/cheat-sheet