为什么我不能在元素上调用 Polymer 函数？

Question

这真的让我很烦，似乎无法让它工作，我认为它一定是我忽略的一些小东西。我收到此错误：Uncaught TypeError: undefined is not a functiontest-index.html:16 (anonymous function)

这是要重现的代码，首先是元素：

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="test-element" >
    <template>
        <div>YOOOOO</div>
    </template>

    <script>
        Polymer({
            loaderup: function(event, detail, sender) {
                alert("WAT?")
            }
        });
    </script>

</polymer-element>

这是试图加载它的页面：

<!doctype html>
<html>
<head>
    <title>MyApp</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="test-element.html">
</head>

<body unresolved>

<test-element id="test-el"></test-element>

<script>
    var x = document.querySelector("#test-el");
    console.log(x);
    x.loaderup();
</script>

</body>
</html>

但它给出了我在 x.loaderup() 上发布的错误。有什么想法吗？

Answer 1

您需要等待 polymer-ready event，因为 Polymer 元素升级是异步执行的：

<script>
  window.addEventListener('polymer-ready', function() {
    var x = document.querySelector("#test-el");
    console.log(x);
    x.loaderup();
  });
</script>

为什么我不能在元素上调用 Polymer 函数？

Why can't I call a Polymer function on an element?

javascript

polymer