Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing JavaScript methods inside nested Polymer custom elements

I am trying to access the Javascript methods contained within a Polymer custom element, <general-element>. This element contains functions to open and close a panel.

This general element is used within a more specific element, e.g: <specific-element></specific-element>. The specific element contains the general element and adds attributes to it, i.e: a panel title etc.

However, when using <specific-element> within a page, I am unable to call any of the open/close methods from through it. Am I approaching this from the wrong way, and is there a way to do this?

Edit: Code Examples

Have removed some Polymer code - examples just to show how the elements work together

General Element:

<dom-module id="general-element">
    <template>
        // Code to define a slide-in panel
    </template>

    <script>
        _openPanel: function() {
            //Apply class to make panel visible
        },
        _closePanel: function() {
            // Apply class to hide panel
        }
    </script>
</dom-module>

Specific Element:

<dom-module id="specific-element">
    <template>
        <general-element title="Administration Panel" >
            <h1>Hello</h1>
        </general-element>
    </template>
</dom-module>

Usage:

<dom-module id="admin-page">
    <template>
        <button on-click="openPanel"></button>
        <specific-element></specific-element>
    </template>

    <script>
        openPanel: function() {
            // Trying to call general-element _openPanel method
        }
    </script>
</dom-module>

What I am trying to do here is call the openPanel behaviour as already described in general-element. This is because the panel will be used in multiple places, so it doesn't make sense to keep implementing open/close methods for specific panels as they will work in the same way.

like image 787
Vanita Avatar asked May 15 '26 23:05

Vanita


1 Answers

This should work

openPanel: function() {
  // Trying to call general-element _openPanel method
  $$('specific-element').$$('general-element')._openPanel();   
}
like image 131
Günter Zöchbauer Avatar answered May 18 '26 13:05

Günter Zöchbauer



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!