Aurelia 自定义元素中的 2 种数据绑定 - 将自定义元素绑定到父视图模型 [英] 2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel

问题描述

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

In my application I have made a lot of "services" which I can inject in my viewmodels to save som redundancy and time.

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

Now I'm looking to take it 1 step further, and make those form elements (select, text, checkboxes - a select dropdown for starters) and turn them into custom elements, injecting the service in only the custom element.

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

I can get it working to some extent. The custom element (select in this case) is showing when I require it in the "parent" view, however when I change the selected value of the custom select element, it does not bind to the "parent" viewmodel, which is my requirement.

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

I want to be able to bind my selected value from the custom element to a property on the "parent" viewmodel via the bind attribute in it's template.

我会在几分钟内更新哪个小代码片段.

I'll update which a little code snippet in a few minutes.

create.js(我称之为父视图模型)

create.js (what I refer to as parent viewmodel)

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

create.html(父视图)

create.html (parent view)

<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>

my-custom.js

my-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 的值时，新选择的值会收到警报，但它不会更新绑定的父变量，即仍然只是显示初始值".

What happens is initially the create.html view outputs "initial value", and as I change the value of the custom element select, the newly selected value gets alerted out, but it does not update the bound parent variable, which is still just displaying "initial value".

推荐答案

这里有几个问题:

1. 由于不区分大小写，您需要将 DOM 中的任何属性名称都区分大小写

1. You need to kebab-case any property names in the DOM due to case-insensitivity

selected-value.bind="property"

不是

selectedValue.bind="property"

你需要双向绑定.使用装饰器创建 @bindable 时，参数之一是用于设置默认绑定模式的 BindingMode.

You need to bind two-way. When creating a @bindable using the decorator, one of the arguments is BindingMode which you use to set the default binding mode.

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

Aurelia sets some sensible defaults, e.g. the default for input value.bind=".." is two way without being explicit

如果您不想设置默认绑定模式，您可以明确绑定:

If you don't want to set a default binding mode, you can just be explicit with your binding:

selected-value.two-way="prop"

希望这有帮助:)

我认为 API 在这个答案之后发生了一些变化.

I think the API changed a little after this answer.

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

The @bindable decorator has the following sig:

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

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

One of the best places to check for quick reference is the Aurelia cheat-sheet in the docs:

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

这篇关于Aurelia 自定义元素中的 2 种数据绑定 - 将自定义元素绑定到父视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！