有人问了一个similar question,我正在尝试对Polymer 1.1中的paper-checkbox进行同样的操作
这是我的完整设置:
<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>
因此,基本上我想在选中该复选框时显示其名称。如果我决定为他们的年龄添加另一个复选框,它也会这样做。但是,上面的代码在选中或未选中时两次运行该代码,甚至运行三次。如何使它在选中时执行一次而在未选中时不执行?
最佳答案
每当有人点击复选框时,您就会在userRequest
函数中为change事件添加一个事件侦听器。因此,用户点击复选框的次数越多,同一事件的事件侦听器就越多。每当事件触发时,他们都会被 call 。但是实际上您只需要一个即可直接添加标记。
<paper-checkbox on-change="checkboxChanged">click</paper-checkbox>
然后在事件处理程序中,您可以通过
event.target.value
访问复选框值checkboxChanged : function(event){
if(event.target.checked) {
console.log(event.target.value);
}
}