Get polymer parent element

Felix

So I've been using Polymer for about a day now and I'm having trouble phrasing this question, so if my approach is way off base, please don't feel the need to fix this, rather point me in the right direction.

What I have are custom elements within custom elements and I would like a child element to affect the parent's attributes. The approach I'm taking is to create a click handler, closing the parent element in an IIFE, then passing that handler to the sub component. Like so...

Polymer({
  ready: function(){
     this.superHandler = (function(p) {
        return function() {
          // "this" here will be the sub-component
          p.title = this.title;
        }
     })(this);
  }
});

Where the parent element uses it in it's template like...

<polymer-element name="parent-element">
  <template>
    <sub-element on-click={{superHandler}} />
  </template>
</polymer-element>

This (in my real code, though it's possible there's typos here) works in everything but IE, and I know IE isn't officially supported, but it's so close I don't want to give up on it. Things I want to avoid are repeated references to parentNodes and shadowRoots to get to the parent I'm looking for.

Edit

I forgot to mention how it's failing in IE, and why I want to avoid the parentNode call. In IE, when it goes to dispatch the event specifically line 9131 of polymer.js, the variable "method" and the reference in obj[method] are strings in IE, and so have no method apply. The reason I want to avoid the parentNode is because the caller isn't the direct parent, so I don't want to keep getting parentNodes until I find the right one, since the code is much more understandable when I can name the variable.

Edit 2

What I'm going with now (since it's working in IE9), though I'm leaving the question open for a better answer is to continue with the IIFE, returning a function that takes an argument that is the child. Then the child will find the parent of interest by a querySelector. This means the child has to have fore-knowledge of the parent and the method to call, which isn't ideal, but... IE.

So the parent sets it up as...

Polymer('parent-element', {
  ready: function(){
     this.superHandler = (function(p) {
        return function(child) {
          p.title = chile.title;
        }
     })(this);
  }
});

And the child must get it by a query selector, say by 'parent-element' and know the name 'superHandler' (not the actual name)

Polymer('child-element',{
        clickHandler: function(){
            var p = document.querySelector('parent-element').superHandler;
            p(this);
        }
    });

Better ideas?

Felix

Thanks for the custom event suggestions. That got me to go back and look at the core elements again to find this.

Then I just need to add a

<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>

Fire off a "core-signal" event with a name of (in this example) "my-event" and create a method "myEventHandler" on the parent e.g.

Polymer({
  myEventHandler: function(e,detail,sender) {...}
})

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

VBA get parent node of element

From Dev

get the class of the parent html element

From Dev

Get parent element based on value of child element

From Dev

How to get the parent of an element

From Dev

Access Host (or parent) JSON data from a child Polymer element

From Dev

Extend polymer element - access parent content

From Dev

How to get parent element?

From Dev

Expose parent Polymer element data to a child element

From Dev

Polymer: wrap parent element around child

From Dev

Get ID of parent element on click

From Dev

jQuery get parent Element and hide it

From Dev

Parent element is ready before its child - Polymer 1.0

From Dev

How to get the width of a polymer element inside the JS of the polymer element

From Dev

Polymer 1.0 two way data binding with parent element

From Dev

Selector to get direct parent of element

From Dev

Get Polymer element that was clicked on from event

From Dev

Get Parent element from child element in appium

From Dev

How to get parent of an element?

From Dev

Get data from server and use it in polymer element

From Dev

Passing Event from Parent to Child Element (Polymer)

From Dev

Get parent element in Angular directive

From Dev

How to get the parent of an element

From Dev

How to get children of parent element?

From Dev

How to get parent element?

From Dev

Get parent text of input element

From Dev

Get child element of parent with jquery

From Dev

Using google polymer, how to get the width of an element

From Dev

Custom element Polymer dialog size/position based on parent page

From Dev

How to get parent element in jquery?