Динамически добавлять Eventlistener в комбинированный ящик vaadin в Polymer Datatable

Question

Я пытаюсь прослушать изменения, внесенные в комбинированный список vaadin (значение) внутри таблицы данных железа.

Это мой полный Datatable:

<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 просто добавляется в первый комбинированный список. Но поскольку динамически создаются несколько ящиков, это не работает. Как я могу динамически добавить 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 ненадежно, так как могут быть новые элементы, добавляемые позже, когда таблица прокручивается.

Поскольку элементы перерабатываются и используются повторно, к новой <vaadin-combo-box> элементы при прокрутке - следовательно, стрельба value-changed события каждый раз, когда ряд перерабатывается.

Предполагая, что вы хотите, чтобы пользователь мог изменить item.state собственность, я предлагаю вам вместо этого связать это свойство с value="{{item.state}}" и добавить слушателя для события item-changed,

Смотрите мой пример здесь: http://jsbin.com/heroqu/edit?html,console,output

item-changed кажется, запускается всегда дважды, но все равно должно быть в порядке.

Answer 2

Ваадин-комбо-бокс уже срабатывает value-changed событие, когда value изменения. Вы можете слушать value-changes событие вместо создания собственного события. Вот документация для vaadin-combo-box,

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