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

Question

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

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

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

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

少しコードスニペットを数分で更新します。 （私は親の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> 

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

Answer 1

は、ここでの問題のカップルがあります：あなたはケースをケバブする必要が

1. による場合、鈍感

   selected-value.bind="property"

   ない

   にDOM内の任意のプロパティ名

   selectedValue.bind="property"

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

   Aureliaは、いくつかの賢明なデフォルトを設定します。 input value.bind=".."のためのデフォルトは、モードをデフォルトのバインディングを設定しない場合、あなたは自分のバインディングと明示することができ、明示的な

   されない2つの方法です：

   selected-value.two-way="prop"

・ホープ、この助けてください:)

編集：私はAPIが少しこの答えの後に変更したと思います。

@bindableデコレータは、次のSIGがありますので

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