CODEWITHSUNDEEP
javascriptpolymer
Cyril F
Cyril F

Reputation: 1882

Make a child component call his parent API in Polymer 1.0.0

I have two web components defined with Polymer 1.0.0 and my question is about 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>

As you can see I wonder how you could easily access the getAll public method from the children?

I've seen some documentation referring to event based solutions (listening to the child events) but that doesn't really fit with my need. Unless you told me that the only solution available..

Any ideas?

Upvotes: 3

Views: 4380

Answers (2)

giwyni
giwyni

Reputation: 3346

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

Upvotes: 0

priolo priolus
priolo priolus

Reputation: 372

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

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

"domHost" is the

"element whose local dom within which this element is contained"

In this way you can access the "parent" and its functions. In my opinion it is not the right approach in Polymer framework.

I have used it, in my project, only to define callback functions to the parent.

(sorry for my bad English)

Upvotes: 11

Related Questions