How to call a function inside a polymer element

Question

How to call a function inside a polymer element

After reading the implementation of the command core-xhrby the Polymer command, the comments showed that we can use the following method to use the element to execute XMLHttpRequests

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

The request () method is declared in the polymer declaration as follows

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

I would like to create a non-ui element where I could, using JavaScript, call the methods declared in the non-ui element, as shown. It seems that the method described above was declared normally, but I could not access my method.

My test item

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

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

My test page

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

I was given Uncaught TypeError: undefined is not a function. Does anyone know if I missed something or the question arose about what I called my notification method?

thank

+4

javascript polymer

zen Jan 08 '15 at 5:34

1

Peter Flannery · Accepted Answer · 2015-01-08T06:23:30+0000

, api jquery. $('# test'). Get (0).alert(), , document.querySelector( "# test" ). Alert()

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

Hide result

How to call a function inside a polymer element

More articles: