Question

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

loader.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>

的index.html

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

index.js

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

P.S。 - 如果我将方法名称从toggle更改为foo，则会引发javascript错误。

Answer 1

我认为这就是你要找的东西

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>

回顾过你的元素后，我看到你将它命名为＃34; loader＆＃34;所有聚合物元素都必须有一个 - 在名称中，所以我重命名为＃34; loader-element＆＃34;在脚本部分中，您没有调用要为其分配脚本的元素的名称。如果您更改该部分以匹配下面的代码，则元素应按预期运行。

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

正如观察我不确定但我不认为jquery在聚合物元素中起作用。

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

1 个答案: