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

在我的应用程序中，我制作了许多服务，可以将这些服务注入到我的viewmodels中，以节省som冗余和时间

现在，我将进一步研究，使这些表单元素选择、文本、复选框-一个用于初学者的选择下拉列表，并将它们转换为自定义元素，只在自定义元素中注入服务

我可以让它在某种程度上发挥作用。在这种情况下，当我在父视图中需要自定义元素选择时，它会显示出来，但是当我更改自定义元素选择的值时，它不会绑定到父视图模型，这是我的要求

我希望能够通过自定义元素模板中的bind属性将选定值从自定义元素绑定到父viewmodel上的属性

我将在几分钟内更新一个小代码片段

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>

---

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

这里有几个问题：

由于大小写不敏感，您需要在DOM中对任何属性名称进行大小写串

所选值。绑定=属性

不是

selectedValue.bind=property

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

Aurelia设置了一些合理的默认值，例如输入值的默认值。bind=。。是双向的，但不明确

如果您不想设置默认绑定模式，可以直接使用绑定：

所选值。双向=道具

希望这有助于：

编辑：我认为API在回答这个问题后有了一些变化

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

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

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

---

哇，非常感谢。多么惊人的回答啊。实际上，snake case事件只是示例代码中的一个输入错误，但是。双向操作造成了所有的差异！：我可以问你喜欢什么-装饰还是双向的吗？你应该将默认绑定模式设置为其他人或你自己期望的模式。在本例中，我会说默认情况下将其设置为双向，因为这是对控件最自然的使用——您几乎总是希望所选值绑定双向。这是Aurelia使用约定的方式，它工作得很好。+1，谢谢你提到蛇壳。我没有看到文档中提到的，因为示例是一个单词变量。当绑定与其他绑定一样完成时，疯狂地试图弄明白绑定是无效的。在BindingMode中传递给@bindable decorator的语法是什么？我很难找到这方面的文件。它看起来像@bindable selectedValue，双向；，或者@bindable双向、selectedValue或@bindable selectedValue BindingMode.twoWay@可绑定{defaultBindingMode:bindingMode.twoWay}等。最好的地方是Aurelia文档中的备忘单：

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