子Web组件的调用方法

Question

我真的很难弄清楚如何调用嵌套聚合物web组件的函数。

这是标记：

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

rise-distribution组件有一个我想从rise-playlist内部调用的canPlay函数。

rise-playlist的dom-module定义如下所示：

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

我可以像这样成功地访问rise-distribution元素：

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

但是，当我尝试调用distribution.canPlay()时，它告诉我distribution.canPlay不是一个函数。

我这样定义了rise-playlist-item的dom-module：

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

我不确定我是否需要那个<content>标签，尽管两者都不起作用。

有什么想法吗？

谢谢。

Answer 1

我知道已经有一段时间了，但我相信这个问题仍然会发生，因为它被观看了很多次。

您的组件定义可能存在问题。让我解释一下。下面是将子组件放入DOM中的方法：

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

这应该是你的组件的定义：

Polymer({

  is: 'your-child-component',

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

如果您由于错误或由于复制-粘贴错误而输入了错误的is: 'your-child-component'部件，因此它将不会反映<your-child-component>，因为您将：

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

将告诉您没有您愿意调用的方法。

正确地从DOM <your-child-component>中识别和选择聚合物，但是如果您有不同的is属性(例如is: your_child_component>)，它不会将其API附加到您选择的dom元素。

如果有人遇到这个问题，我希望它会有所帮助。