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

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

现在,我希望将其进一步发展,并制作这些表单元素(选择,文本,复选框-初学者的选择下拉列表)并将其转换为自定义元素,仅将服务注入到自定义元素中.

我可以使它在某种程度上起作用.在“父”视图中需要时显示自定义元素(在这种情况下为select),但是当我更改自定义选择元素的选定值时,它不绑定到“父”视图模型,这是我的要求.

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

我将在几分钟后更新其中的一些代码段.

create.js(我称为父viewmodel)

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>

我-custom.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视图输出“初始值”,并且当我更改自定义元素select的值时,新选择的值将发出警报,但不会更新绑定的父变量,该父变量仍在显示“初始值”.

最佳答案
这里有几个问题:

>由于不区分大小写,您需要对DOM中的所有属性名称进行大小写转换

选择-value.bind = “属性”

selectedValue.bind = “属性”
>您需要双向绑定.使用装饰器创建@bindable时,其中一个参数是BindingMode,您可以使用它来设置默认的绑定模式.

Aurelia设置了一些合理的默认值,例如输入值的默认值.bind=“ ..”是两种方式,无需明确

如果您不想设置默认的绑定模式,则只需对绑定进行明确设置即可:

选择-value.two单向= “托”

希望这可以帮助 :)

编辑:我认为这个答案后,API有所改变.

@bindable装饰器具有以下信号:

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

快速参考的最佳位置之一是docs中的Aurelia速查表:

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

转载注明原文:Aurelia自定义元素中的2种方式数据绑定-将自定义元素绑定到父视图模型 - 代码日志