Clever Geek Handbook

Make a child component to call its parent API in Polymer 1.0.0

I have two web components defined with Polymer 1.0.0 and my question is accessing the parent public API

<dom-module id="x-gallery">
  <template is="dom-repeat" items="{{photos}}">
    <x-photo photo="{{item}}"></x-photo>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-gallery',

    ...

    getAll: function() {
      return this.photos;
    }
  });
</script>

<dom-module id="x-photo">
  <template>
    <img src="{{photo.src}}">
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-photo',
    properties: {
      photo: Object
    },

    ready: function() {
      // HERE ---
      // How could I access the x-gallery.getAll public method?
      // ...
    }
  });
</script>
Run codeHide result


As you can see, I wonder how you could easily access the public method getAll

from children?

I have seen some documentation pertaining to event based solutions (listening to child events), but that doesn't fit my need. Unless you told me there is only one solution available.

Any ideas?

+3


source to share


2 answers 


ready: function() {
    this.domHost.getAll()
}

from the documentation: http://polymer.github.io/polymer/

"domHost" is

"whose local dom, which contains this element"



This way you can access the "parent" and its functions. In my opinion, this is the wrong approach within the Polymer.

I've only used it in my project to define callback functions for the parent.

(sorry for my bad english)

+11


source


Confirmed. I've used both methods - 1. parent explicitly setting the child property to point to the parent, and 2. domHost. domHost is simpler and better since it's built in. In method 1, you have to make sure the child is ready before setting the property.



0


source






More articles:


All Articles