子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'部分，因此它不会反映<your-child-component>您会感到困惑，因为您：

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

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

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

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