javascript - how to call function within a polymer element

While reading the implementation of the core-xhr element by the Polymer team, the ments indicated that we could use the following method to use the element to perform 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 within the polymer declaration as follow

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

I will like to create a non-ui element where I could, using JavaScript, call on the methods declared within the non-ui element as demonstrated. It will seem that the method above was declared normally but I was unable to access my method.

My test element

<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 a Uncaught TypeError: undefined is not a function. Does anyone know if I missed anything out or there was issue with how i called my alert method?

Thanks

While reading the implementation of the core-xhr element by the Polymer team, the ments indicated that we could use the following method to use the element to perform 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 within the polymer declaration as follow

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

My test element

<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 a Uncaught TypeError: undefined is not a function. Does anyone know if I missed anything out or there was issue with how i called my alert method?

Thanks

Share Improve this question asked Jan 8, 2015 at 5:34 zen 3574 silver badges16 bronze badges

what is your polymer version? – Gaurav Dave Commented Jan 8, 2015 at 5:45
version 0.5.1 I believe – zen Commented Jan 8, 2015 at 6:23

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

It's because your trying to call the api on the jquery wrapper. Instead either use $('#test').get(0).alert() to get the element interface or even better make a direct call using document.querySelector("#test").alert()

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

  // without jquery
  // document.querySelector("#test").alert()

<script src="https://www.polymer-project/ponents/webponentsjs/webponents.js"></script>
<link rel="import" href="https://www.polymer-project/ponents/polymer/polymer.html">
<script src="https://ajax.googleapis./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to call function within a polymer element - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)