在嵌套的 Polymer 自定义元素中访问 JavaScript 方法

Question

我正在尝试访问 Polymer 自定义元素 <general-element> 中包含的 Javascript 方法。此元素包含打开和关闭面板的函数。

此通用元素在更具体的元素中使用，例如：<specific-element></specific-element>。特定元素包含一般元素并为其添加属性，即：面板标题等

但是，在页面中使用 <specific-element> 时，我无法通过它调用任何 open/close 方法。我是不是从错误的方式来处理这个问题，有没有办法做到这一点？

编辑：代码示例

删除了一些 Polymer 代码 - 示例只是为了展示元素如何协同工作

一般元素：

<dom-module id="general-element">
    <template>
        // Code to define a slide-in panel
    </template>

    <script>
        _openPanel: function() {
            //Apply class to make panel visible
        },
        _closePanel: function() {
            // Apply class to hide panel
        }
    </script>
</dom-module>

特定元素：

<dom-module id="specific-element">
    <template>
        <general-element title="Administration Panel" >
            <h1>Hello</h1>
        </general-element>
    </template>
</dom-module>

用法：

<dom-module id="admin-page">
    <template>
        <button on-click="openPanel"></button>
        <specific-element></specific-element>
    </template>

    <script>
        openPanel: function() {
            // Trying to call general-element _openPanel method
        }
    </script>
</dom-module>

我在这里尝试做的是调用 general-element 中已描述的 openPanel 行为。这是因为该面板将在多个地方使用，因此继续为特定面板实施 open/close 方法没有意义，因为它们将以相同的方式工作。

Answer 1

这应该有效

openPanel: function() {
  // Trying to call general-element _openPanel method
  $$('specific-element').$$('general-element')._openPanel();   
}

在嵌套的 Polymer 自定义元素中访问 JavaScript 方法

Accessing JavaScript methods inside nested Polymer custom elements

javascript

web-component

polymer

polymer-1.0