dom-重复不反映数据变化

Question

我尝试了计算属性和各种其他技术，但视图并未反映我的模型。模型更新，但视图没有。

查看

<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 = ''
     }
    });
}

目标是单击 "selection" 中的项目获取其 ID 值并将其与 "subSelection" 中具有相同 ID 的项目匹配，然后将活动值更改为 "active"或“”。

一切顺利，除了视图更新。

Answer 1

所以我最终通过 this.set(属性, 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", '');
       }
   );
 }

dom-重复不反映数据变化

dom-repeat not reflecting data changes

javascript

polymer