Полимер - Связать события с динамически создаваемыми элементами

Я пытаюсь создать полимерный компонент, который сделает вызов ajax и заполнит список на основе ответа, и я также хотел бы добавить событие click/tap для каждого чтобы сделать что-то, когда я нажимаю на элемент списка.Полимер - Связать события с динамически создаваемыми элементами

создать список так:

populateList: function(items) { 
    if (items.length == 0) { 
     return; 
    } 
    var menu = this.$$('.mp-Autocomplete-dropdown-menu'); 
    var node = null; 

    for (var k = 0; k < items.length; k++) { 
     node = document.createElement('li'); 
     node.setAttribute('class', 'style-scope mp-autocomplete'); 
     node.setAttribute('tabindex', '0'); 

     node.innerHTML = items[k]; 
     menu.appendChild(node); 
     this.listen(this.$$('li'), 'click', '_itemTapHandler'); 

     .addEventListener('') 
    } 
    },

Но «слушать» не работает, и я не могу найти что-нибудь еще в полимерных документах, которые могли бы помочь мне - не выходя за пределами компоненты и вызывать прямые js на полный документ, что было бы нехорошо ...... Может ли кто-нибудь мне помочь?

Спасибо, Колм

источник

2016-04-20 protos

Не будет ли с помощью 'РОМ repeat' сделать это намного больше Полегче? – Alan

Это было бы, если бы я заполнял список статически, но я использую js для вызова ajax, поэтому его нужно динамически строить. – protos

Вы можете использовать 'iron-ajax', чтобы сделать вызов ajax и привязать результат к свойству, которое делится как' items' с 'dom-repeat' и получить тот же динамический результат практически без js-написанных (или просто сделать ajax вызовите js и установите результат в свойство, связанное с dom-repeat.items) – Alan

this.$$('li') всегда возвращает первый элемент <li> в своей стихии, то есть, вероятно, не то, что вы хотите.

Используйте вместо этого:

this.listen(node, 'click', '_itemTapHandler');

и если вы хотите, чтобы удалить его позже

var node = ... /* get reference to node */ 

this.unlisten(node, 'click', '_itemTapHandler');

источник

2016-04-20 15:34:42

Polymer [tip] (https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated -listeners): «Используйте« on-tap », а не« on-click »для события, которое постоянно срабатывает как на сенсорном (мобильном), так и на кликном (настольном) устройствах». Итак, вы должны прослушать «нажмите» вместо «щелчок». –

Третий аргумент ['Polymer.listen/unlisten'] (https://www.polymer-project.org/1.0/api/#Polymer.Base:method-listen) должен быть именем метода (string), а не функция ref. Ваш пример приводит к ошибке при нажатии кнопки «li». –

@ tony19 Большое спасибо! –

Полимер - Связать события с динамически создаваемыми элементами

ответ

Смежные вопросы