如何在聚合物元素中调用函数

时间:2015-01-08 05:34:26

标签: javascript polymer

在阅读Polymer团队的core-xhr元素实现时,注释表明我们可以使用以下方法来使用该元素来执行XMLHttpRequests

* core-xhr can be used to perform XMLHttpRequests.
*
*     <core-xhr id="xhr"></core-xhr>
*     ...
*     this.$.xhr.request({url: url, params: params, callback: callback});

request()方法在聚合物声明中声明如下

Polymer('core-xhr', {
     request: function(options) {...},
     toQueryString: function(params) {....},
                ....
});

我想创建一个非ui元素,我可以使用JavaScript调用非ui元素中声明的方法。似乎上面的方法被正常声明,但我无法访问我的方法。

我的测试元素

<polymer-element name="test-element" attributes="url">
<template>

</template>
<script>
    Polymer({
        url:"",
        alert: function()
        {
            alert("alert!");
        }           
    });
</script>
</polymer-element> 

我的测试页

<body>
    <test-element id = "test"></test-element> 
    <script>
       $('#test').alert();
    </script
</body>

我获得了Uncaught TypeError: undefined is not a function。有没有人知道我是否遗漏了任何内容,或者我是如何调用我的警报方法的?

由于

1 个答案:

答案 0 :(得分:3)

这是因为你试图在jquery包装器上调用api。相反,要么使用$('#test')。get(0).alert()来获取元素接口,要么甚至更好地使用document.querySelector(“#test”)进行直接调用.warning()

  $(document).ready(function() {
    $('#test').get(0).alert();
  });

  // without jquery
  // document.querySelector("#test").alert()
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<polymer-element name="test-element" attributes="url">
  <template>

  </template>
  <script>
    Polymer({
      url: "",
      alert: function() {
        alert("alert!");
      }
    });
  </script>
</polymer-element>

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