Call Method of Child Web Component

Question

I'm really having difficulty trying to figure out how to call a function of a nested Polymer web component.

Here's the markup:

<rise-playlist>
  <rise-playlist-item duration="5">
     <rise-distribution distribution='[{"id":"VGZUDDWYAZHY"}]'></rise-distribution>
  </rise-playlist-item>
</rise-playlist>

The rise-distribution component has a canPlay function that I would like to call from inside of rise-playlist.

The dom-module definition of rise-playlist looks like this:

<dom-module id="rise-playlist">
  <template>
    <content id="items" select="rise-playlist-item"></content>
  </template>
</dom-module>

I can successfully access the rise-distribution element like this:

var distribution = Polymer.dom(this.$.items[0]).querySelector("rise-distribution");

However, when I try to call distribution.canPlay(), it says that distribution.canPlay is not a function.

I've defined the dom-module of rise-playlist-item like this:

<dom-module id="rise-playlist-item">
  <content id="dist" select="rise-distribution"></content>
</dom-module>

Not sure if I need that <content> tag, although neither works.

Any ideas?

Thx.

Answer 1

I know that there have been a while but I am sure this problems still occurs as it is being viewed number of times.

Probably there is a problem with your component definition. Let me explain. This is the way you put your child component inside DOM:

<your-child-component></your-child-component>

And and this should be the definition of your component:

Polymer({

  is: 'your-child-component',

  apiMethod: function() {
  //some stuff
  }
});

If you by mistake or due copy-paste error mistype the is: 'your-child-component' part, so it will not reflect the <your-child-component> you will get confused becouse your:

this.$$('your-child-component').apiMethod();

will tell you that there is no method you are willing to call.

Polymer correctly identified and selected from DOM <your-child-component> but if you have different is property (like for example is: your_child_component>) it will not attach its API to dom element you selected.

I hope that it will help if anyone ever will encounter this problem.