I have a polymer template that looks like this:
<paper-dropdown-menu id="myMenu" label="checkbox list" multi>
<paper-listbox class="dropdown-content">
<template is="dom-repeat" items="[[availableItems]]">
<paper-item on-tap="menuCheckedChanged">
<paper-checkbox id$="chkClass_" checked="">
[[item]]
</paper-checkbox>
</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
As you can see, I'm trying to react to the on-tap
event of the paper-item
and not the only it's child paper-checkbox
. I'd like the user to be able to check an item in the list when they click anywhere on the "row". Mainly because the paper-dropdown-menu
closes when you click anywhere on the "row" (paper-item
).
The menuCheckedChanged
function looks like this:
menuCheckedChanged: function(e) {
var index = e.model.index;
var item = e.model.item;
var checkbox;
if(e.target.tagName == "PAPER-ITEM") {
checkbox = e.target.firstChild;
this.eventFire(checkbox, 'tap');
return;
} else {
checkbox = document.getElementById("chkClass_" + index);
}
if (checkbox.checked) {
this.push("myItems", item);
this.notifySplices("myItems", this.myItems);
} else {
this.removeItem(item);
}
this._changed();
},
eventFire: function(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
},
As you can see, the strategy I'm trying is to inspect e.target
to determine which element was "tapped" and mimic the "tap" event of the checkbox if it the target was the paper-item
(row). I expect the new event to toggle the checked
attribute of the checkbox I'm firing a tap for. But it doesn't (though it does invoke the menuCheckChanged
function).
Any ideas how I can achieve the desired behavior?
Aucun commentaire:
Enregistrer un commentaire