web-dev-qa-db-ja.com

Aureliaカスタム要素での2ウェイデータバインディング-カスタム要素を親ビューモデルにバインドします

私のアプリケーションでは、冗長性と時間を節約するためにビューモデルに挿入できる多くの「サービス」を作成しました。

今、私はそれをさらに一歩進めて、それらのフォーム要素（選択、テキスト、チェックボックス-スターターの選択ドロップダウン）を作成し、それらをカスタム要素に変換して、カスタム要素のみにサービスを注入することを検討しています。

ある程度は動作させることができます。カスタム要素（この場合はselect）は、「親」ビューで必要なときに表示されますが、カスタムselect要素の選択された値を変更すると、「親」ビューモデルにバインドされません。これは私の要件です。 。

選択した値をカスタム要素から「親」ビューモデルのプロパティに、そのテンプレートのバインド属性を介してバインドできるようにしたい。

数分でどの小さなコードスニペットを更新します。

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>

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の値を変更すると、新しく選択された値が警告されますが、バインドされた親変数は更新されません。 "初期値"。

aurelia
10
Dac0d3r

ここにはいくつかの問題があります。

  1. 大文字と小文字が区別されないため、DOM内のプロパティ名をケバブで大文字にする必要があります

    selected-value.bind="property"

    not

    selectedValue.bind="property"

  2. 双方向でバインドする必要があります。デコレータを使用して@bindableを作成する場合、引数の1つはBindingModeであり、これを使用してデフォルトのバインディングモードを設定します。

    Aureliaは、いくつかの賢明なデフォルトを設定します。 input value.bind=".."のデフォルトは、明示的ではなく双方向です

    デフォルトのバインディングモードを設定したくない場合は、バインディングを明示的に指定できます。

    selected-value.two-way="prop"

お役に立てれば ：）

編集：この回答の後、APIが少し変更されたと思います。

@bindableデコレータには次のsigがあります。

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

クイックリファレンスを確認するのに最適な場所の1つは、ドキュメントのAureliaチートシートです。

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

28
Charleh