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

Question

在阅读 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。有谁知道我是否遗漏了什么或者我调用警报方法的方式有问题吗？

谢谢

Answer 1

这是因为您试图在 jquery 包装器上调用 api。相反，要么使用 $('#test').get(0).alert() 获取元素接口，要么更好地使用 document.querySelector("#test").alert()[=12 进行直接调用=]

  $(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>

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

how to call function within a polymer element

javascript

polymer