2

Aurelia アプリでカスタム要素を使用しています。ビューモデルのデータをカスタム要素にバインドすると、正常に機能します。カスタム要素コントロールのデータに変更を加えても、双方向のデータ バインディングのおかげで、ビュー モデルのデータにも変更が反映されます。

ただし、(javascript を使用して) ビュー モデルからのデータに変更を加えると、データはカスタム要素で更新されません。より単純な設定でこの問題を再現しました。

単純なビュー モデル

export class Playground {

  public testObj: any;
  counter = 0;


  constructor() {
    this.testObj = {
        prop1: "This is prop1 value"           
        , collection2: [{ id: "item21" }]
    }        
  }

  updateProp1() {
    alert("before update: "+this.testObj.prop1);
    this.testObj.prop1 = "Sayan " + this.counter++;
    alert(this.testObj.prop1);
  }

  verifyChange() {
    alert(this.testObj.prop1);
  }
}

シンプルビュー

<template>
<h1>
    Playground
</h1>

<div >         
    <div repeat.for="item of testObj.collection2">
        <div class="row">
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="prop1"
                       value.bind="$parent.testObj['prop1']">
            </div>
        </div>
    </div>

    <button click.delegate="updateProp1()" class="btn btn-primary"> Update Prop1 </button>
    <button click.delegate="verifyChange()" class="btn btn-primary"> Verify Change </button>

</div>

</template>

Verify Changeテキストボックスの値を変更した後にクリックするたびに、変更された値がアラートに表示されます。しかし、Update Prop1ボタンをクリックするとprop1値が更新されますが、変更がビューに反映されません。何が欠けているのか正確にはわかりません。

注:を使用する代わりに、 を使用する$parent.testObj['prop1']と$parent.testObj.prop1、データバインディングが正常に機能します。$parent.testObj['prop1']ただし、私の実際のカスタム要素は一般的な種類のものであり、プロパティ名は事前にわかっていないため、ドット表記の代わりに表記を使用し続ける必要があるようです: $parent.testObj.prop1.

ポインター/提案​​/フィードバックをお待ちしております。

更新: aurelia データ バインディングに関するドット表記とインデクサー表記の違いを誰かが指摘できれば(私は既にこれを確認しました)、それは非常に役立ちます。

4

1 に答える 1