如何为自定义聚合物元素创建方法并在主应用程序中调用它

How to create a method for custom polymer element and call it in a main App?

本文关键字：应用程序 调用 方法 自定义 聚合物 创建 元素      更新时间：2023-09-26

我正在编写我的自定义聚合物元素。我需要为该元素定义一个方法toggle。每当我在主HTML中创建该元素时，我都应该能够调用该方法。以下代码不起作用。我做错了什么？

装载机.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<script type="text/javascript" src="../../javascripts/jquery.js"></script>
<polymer-element name="loader">
    <template>
        <paper-dialog opened id="loadingPage">"{{message}}"</paper-dialog>
    </template>
    <script>
        Polymer({
            message: "Activating",
            toggle: function() {
                //jQ("#loadingPage").toggle();
                console.log("Internal toggle");
            }
        });
    </script>
</polymer-element>

索引.html

<loader id="activationLoading">
        </loader>
<paper-button id="act-submit" raised>
                        Continue
                    </paper-button>

索引.js

jQ('#act-submit').click(function () {
            console.log("toggled");
            jQ('#activationLoading').toggle();
        });

PS - 如果我将方法名称从 toggle 更改为 foo ，它会抛出一个 javascript 错误。

我认为这就是你要找的 

button = document.querySelector("#act-submit");
button.addEventListener('click', function () {
    document.querySelector("#activationLoading").toggle();
});

编辑：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<script type="text/javascript" src="../../javascripts/jquery.js"></script>
<polymer-element name="loader-element">
    <template>
        <paper-dialog opened id="loadingPage">"{{message}}"</paper-dialog>
    </template>
    <script>
      Polymer('loader-element', {
        message: "Activating",
        toggle: function() {
            //jQ("#loadingPage").toggle();
            console.log("Internal toggle");
        }
      });
  </script>
</polymer-element>

回顾您的元素后，我看到您将其命名为"加载器"，所有聚合物元素的名称都必须具有 - 所以我重命名为"加载器元素" 在您的脚本部分中，您没有调用要分配脚本的元素的名称。 如果更改该部分以匹配下面的代码，则元素应按预期运行。 

      Polymer('loader-element', {
        message: "Activating",
        toggle: function() {
            //jQ("#loadingPage").toggle();
            console.log("Internal toggle");
        }
      });

作为一个观察，我不确定，但我认为jQuery不适用于聚合物元素。

相关文章：