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

时间:2015-02-19 21:48:03

标签: javascript polymer

这真的让我烦恼,似乎无法让它发挥作用,我认为它必须成为我忽视的一些小东西。我收到此错误: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()上发布的错误。有什么想法吗?

1 个答案:

答案 0 :(得分:2)

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

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