データの変更が反映されないdom-repeat

Question

計算されたプロパティやさまざまな手法を試しましたが、ビューにモデルが反映されていません。モデルは更新されますが、ビューは更新されません。目標は「ダイレクト選択」の「選択」のid値を取得し、それに合致し、項目に項目をクリックすることであろう

ビュー

<div class="selection"> 
    <ul> 
    <template is="dom-repeat" items="{{state.selection}}"> 
    <li> 
    <a data-selection$="{{item.id}}" on-click="selection">{{item.name}}</a> 
    </li> 
    </template> 
    </ul> 
</div> 

<div class="selection sub-selection"> 
<template is="dom-repeat" items="{{state.subSelection}}"> 
    <ul id$="subselection-{{item.id}}" class$="[[item.active]]"> 
    <template is="dom-repeat" items="{{item.selections}}"> 
     <li> 
     <a data-selection="{{item.id}}" on-click="selection">{{item.name}}</a> 
     </li> 
    </template> 
    </ul> 
</template> 
</div> 

モデル

constructor(){ 
    super() 
    this.state = { 
     selection: [ 
      { 
      id: 1, 
      name: 'Selection One' 
      }, 
      { 
      id: 2, 
      name: 'Selection Two' 
      } 
     ], 

    subSelection: [ 
      { 
      id: 1, 
      name: 'Sub Selection One', 
      active: 'active' 
      }, 
      { 
      id: 2, 
      name: 'Sub Selection Two', 
      active: '' 
      } 
     ] 
    } 

    selection(event){ 
    event.preventDefault(); 
    let self = this; 
    let id = parseInt(event.currentTarget.getAttribute('data-selection')); 

    self.state.subSelection.forEach(function(key, index){ 
    if(key.id === id){ 
     key.active = 'active' 
    }else{ 
     key.active = '' 
    } 
    }); 
} 

同じidでアクティブな値を "active"または ""に変更します。

ビューの更新を除いてすべてがうまくいきます。

Answer 1

私はthis.set（property、value）で解決しました。ポリマーはこれがどのように達成されるべきかに非常に特有である。しかし、私の更新機能では、次のように機能しました。

selection(event){ 
    event.preventDefault(); 
    let self = this; 
    let id = parseInt(event.currentTarget.getAttribute('data-selection'));  
    self.state.subSelection.forEach(function(key, index){ 
     if(key.id === id){ 
     self.set("state.subSelection."+index+".active", 'active'); 
     }else{ 
     self.set("state.subSelection."+index+".active", ''); 
     } 
    ); 
}