在聚合物数据表中的vaadin组合框上动态添加事件侦听器

Question

我试着听一听铁数据表中的一个vaadin组合框(value)中所做的更改。

这是我的完整数据表：

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

我想听听价值观的变化：

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

我正在添加一个事件侦听器：

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

也曾尝试过：

document.getElementById(...)

问题是，Eventlistener刚刚添加到第一个组合框中。但是，由于动态创建了多个框，这是行不通的。如何动态地将事件侦听器添加到多个组合框中？还是有其他的解决办法？

编辑：尝试过这样的方法：

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

编辑2:

变化

on-value-change="valueChanged"

至

on-value-changed="valueChanged"

现在edit1开始工作了！但是当页面第一次设置组合框的值时，它已经触发了.

Answer 1

正确的方法是在模板中使用on-value-changed (注意changeD)属性。使用querySelector是不可靠的，因为以后可能会在表中添加新元素。

因为这些元素正在被回收和重用，所以在每次回收一行时滚动- hence触发value-changed事件时，都会有一个新的值绑定到value-changed元素。

假设您希望用户能够更改item.state属性，我建议您使用value="{{item.state}}"双向绑定该属性，并为事件item-changed添加一个侦听器。

参见这里的示例：http://jsbin.com/heroqu/edit?html,console,output

item-changed似乎总是两次被触发，但是它仍然可以使用。

Answer 2

Vaadin-组合框已经在value-changed更改时触发value事件。您可以侦听value-changes事件，而不是创建自己的事件。下面是 vaadin-combo-box的文档。

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