AureliaのViewmodelでオブジェクトに変更した後に文字列補間が更新されない

Question

ViewModelのオブジェクトが更新されているときに更新されない要素がAureliaで表示されます。私はPub/SubとEvent Aggregatorsに関するドキュメントを見たことがありますが、私は2つの異なるリソース間で通信しようとしているわけではなく、ViewとそのViewModel 。

ViewModelでオブジェクトに変更が発生した場合、ビュー内の文字列補間を正しく更新する（または更新をトリガーする）方法がわかりません。

myview.html

<h1>My List</h1> 
<ul> 
    <li repeat.for="group of modelObject.groups"> 
     <span>${group.id}</span> 
     <span repeat.for="state of group.region">${state}</span> 
    </li> 
<ul> 
<button click.delegate(editModelObject())>Edit</button> 

myviewmodel.js

何らかの理由で

constructor() 
{ 
    this.modelObject = { 
     <other stuff>, 
     "groups": [ 
      { 
       "id": "default", 
       "regions" : ["NY", "CT", "NJ"] 
      }, 
      { 
       "id": "west", 
       "regions" : ["CA", "OR"] 
      } 
     ], 
     <more stuff> 
    } 
} 

editModelObject() { 
    <something that updates both the id and regions of a group in this.modelObject> 
} 

を次のように

私のコードは、状態が正しく表示に変更され、 IDはそうではありません。双方向バインディングを正しく動作させるにはPub/Subのようなものを使用する必要がありますか？それとも、私が行方不明になっているか間違っているという単純なことはありますか？

Answer 1

これは、配列のオブジェクトのいずれかのプロパティを変更した場合に機能します。しかし、配列のインデックスの1つを代入すると、ダーティチェックが必要になるため、これは機能しません。 https://github.com/aurelia/binding/issues/64

問題を解決するには、インデックス割り当ての代わりにsplice()を使用する必要があります。例えば：

https://gist.run/?id=087bc928de6532784eaf834eb918cffa

例を実行

const newItem = { id: 77, name: 'Test 77', obj: { name: 'Sub Name 77' } }; 
//instead of this.model.items[0] = newItem; use below 
this.model.items.splice(0, 1, newItem);