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