polymer - 子 Web 组件的调用方法

Question

我真的很难弄清楚如何调用嵌套 Polymer Web 组件的函数。

这是标记:

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

rise-distribution组件有 canPlay我想从 rise-playlist 内部调用的函数.
dom-module rise-playlist的定义看起来像这样:

<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不是函数。

我已经定义了 dom-module的 rise-playlist-item像这样:

<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'部分，所以它不会反射(reflect) <your-child-component>你会感到困惑，因为你的:

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

会告诉你没有你愿意调用的方法。

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

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