javascriptpolymerdom-eventspolymer-1.0

Polymer fire parent element

How do I trigger the parent element on-tap function from its child?

<div class="parent-el" item-index="[[index]]" on-tap="openItem">
    <div>[[item.name]]</div>
</div>

I have tried creating different function for child to fire the parent.

<div on-tap="openItem2">[[item.name]]</div>

openItem2: function(e) {
  var parent = e.target.parentNode;
  this.fire('openItem', parent);
}
// Nothing happens on this

or

openItem2: function(e) {
  var parent = e.target.parentNode;
  this.openItem(parent);
}
// Outputs error

I am still new to Polymer and still gets confused.

Solution

  • No need to get parent and trigger it's function. By default the event.propagation goes to parent if you don't stop it using event.stopPropagation(). So, just have a parent function.

    openItem: function(e){
  // write your logic
}