Получить значение из папье-флажка, если проверено

Question

similar question были заданы, и я пытаюсь сделать то же самое с бумажным флажком в Polymer 1.1

Вот моя полная установка:

<dom-module id="my-app"> 
<template> 
    <firebase-collection 
    location="htt://www.abc.com/users" 
    order-by-child="formatOrder" 
    data="{{users}}"> 
    </firebase-collection> 
    <template is="dom-repeat" items="[[users]]" as="user"> 
    <paper-checkbox id="user-checked" value="{{user.name}}" on-tap="userRequest">click</paper-checkbox> 
    </template> 
</template> 
<script> 
    Polymer({ 
    is: "my-app", 

    userRequest: function() { 
    var cbs = document.querySelectorAll('#user-checked'); 
    for(var i = 0; i < cbs.length; i++) { 
    cbs[i].addEventListener('change', function() { 
     if(this.checked) { 
     console.log(this.value); 
     } 
    }); 
    } 
    }, 
    }); 
</script> 
</dom-module> 

Поэтому в основном я хочу, когда флажок установлен, он показывает свое имя. Если я решил добавить еще один флажок для своего возраста, он сделает то же самое. Но приведенный выше код запускает код дважды, когда он установлен или не установлен, даже три раза. Как заставить его выполнить один раз при проверке и не выполнять, когда он не установлен?

Answer 1

Каждый раз, когда кто-то устанавливает флажок, вы добавляете прослушиватель событий для события изменения в свою userRequest. Таким образом, чем чаще пользователь вводит флажок, тем больше слушателей событий вы будете иметь для одного и того же события. Они будут вызваны каждый раз, когда происходит пожар. Но на самом деле вам нужен только один, и вы можете добавить в разметку напрямую.

<paper-checkbox on-change="checkboxChanged">click</paper-checkbox> 

Тогда в обработчике событий вы можете получить доступ к значению флажок через event.target.value

checkboxChanged : function(event){ 
    if(event.target.checked) { 
     console.log(event.target.value); 
    } 
}