2017-12-21 7 views
1

Ich versuchte, berechnete Eigenschaften und verschiedene andere Techniken, aber die Ansicht spiegelt nicht mein Modell wider. Das Modell wird aktualisiert, die Ansicht jedoch nicht.dom-repeat nicht widerspiegeln Datenänderungen

Ansicht

<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> 

Modell

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

Das Ziel wäre, einen Artikel in "Auswahl" zu klicken Sie auf den ID-Wert erhalten und passen sie an und Artikel in "Subselection" mit derselben ID dann den aktiven Wert zu "aktiv" oder "" ändern.

Alles geht gut außer der Ansicht aktualisieren.

Antwort

1

Also habe ich am Ende gelöst this.set (Eigenschaft, Wert). Polymer ist sehr speziell darin, wie dies auch erreicht werden sollte. Aber folgendes funktionierte in meiner Update-Funktion:

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", ''); 
     } 
    ); 
} 
+0

So funktioniert es in Polymer. Ohne Verwendung der Mutatorfunktionen 'set/push' wäre es für die Bibliothek unmöglich zu wissen, welche Variablen sich geändert haben. –

Verwandte Themen