Eventlististen dynamisch auf Vaadin Combobox in Polymer Datatable

Question

hinzufügen Ich versuche, Änderungen in einer Vaadin-Combobox (Wert) innerhalb einer Eisen-Datentabelle zu hören.

Dies ist meine komplette Datentabelle:

<iron-data-table id="grid4" items="[[riskCombined]]" selection-enabled on-selected-items-changed="_selected" > 
    <data-table-column name="#" width="20px" flex="0"> 
    <template> 
     <div class="index">[[item]]</div> 
     </template> 
     </data-table-column> 
    <data-table-column name="Risk" width="140px" flex="0"> 
     <template>[[item.name]]</template> 
    </data-table-column> 
    <data-table-column name="State" width="100px" flex="0"> 
    <template><vaadin-combo-box value=[[item.state]] items=[[item.settings]] on-value-change="valueChanged" id=combobox[[index]]> </vaadin-combo-box></template> 
</data-table-column> 
    </iron-data-table> 

Ich möchte auf Wertänderungen hören:

<data-table-column name="State" width="100px" flex="0"> 
    <template> 
    <vaadin-combo-box value=[[item.state]] items=[[item.settings]] on-value- change="valueChanged" id=combobox[[index]]> </vaadin-combo-box> 
    </template> 
    </data-table-column> 

Ich füge einen Eventlistener:

<script> 
var combobox = document.querySelector('vaadin-combo-box'); 
    combobox.addEventListener('value-changed', function(event) { 
     console.log(event.detail.value); 
    }); 

    combobox.addEventListener('selected-item-changed', function(event) { 
     console.log(event.detail.value); 
    }); 
</script> 

auch versucht, mit:

document.getElementById(...) 

Das Problem ist, dass der Eventlistener nur der ersten Combobox hinzugefügt wird. Da jedoch mehrere Boxen dynamisch erstellt werden, funktioniert dies nicht. Wie kann ich den Eventlistener dynamisch zu mehreren Comboboxen hinzufügen? Oder gibt es eine andere Lösung?

Edit: versuchte dies:

valueChanged: function(event) { 
     console.log(event.detail.value); 
     } 

Edit 2:

geändert

on-value-change="valueChanged" 

zu

on-value-changed="valueChanged" 

Jetzt edit1 funktioniert! Aber es feuert bereits wenn die Seite lädt das erste Mal und setzt die Werte der Combobox ...

Answer 1

Vaadin-Combo-Box bereits feuert value-changed Ereignis, wenn value ändert. Sie können das Ereignis value-changes hören, anstatt ein eigenes Ereignis zu erstellen. Here's die Dokumentation für vaadin-combo-box.

listeners:{'value-changed':'valueChanged'}, 
valueChanged:function(e){ 
    //code goes here 
} 

Answer 2

Der richtige Weg ist die on-value-changed (man beachte die Changed) Attribut in der Vorlage zu verwenden. Die Verwendung von querySelector ist unzuverlässig, da möglicherweise später neue Elemente hinzugefügt werden, wenn die Tabelle gescrollt wird.

Da die Elemente wiederverwendet und wiederverwendet werden, gibt es beim Scrollen einen neuen Wert, der an die <vaadin-combo-box> -Elemente gebunden ist. Daher werden immer value-changed Ereignisse ausgelöst, wenn eine Zeile wiederverwendet wird.

Sie Angenommen, wollen, dass die Benutzer in der Lage sein, die item.state Eigenschaft zu ändern, schlage ich vor, Sie stattdessen die Eigenschaft Zweiwege mit value="{{item.state}}" gebunden und ein Listener für das Ereignis item-changed hinzufügen.

Siehe mein Beispiel hier: http://jsbin.com/heroqu/edit?html,console,output

Die item-changed scheint immer zweimal gefeuert zu werden, aber es sollte noch in Ordnung sein zu verwenden.