All geek questions in one place

How to add a function attribute to a polymer element

I want to create a polymer element with a function attribute that will be called when a success response is received.

<foo-bar url="/api/getdata" succCallback="func"></foo-bar> func function(){ alert('hi'); }

I tried this:

 <polymer-element name="foo-bar" attributes="url succCallback"> <template> <core-ajax id="ajax" method="POST" url="{{url}}" contentType="application/json" handleAs="json" on-core-response="{{handleResponse}}"></core-ajax> </template> <script> Polymer({ handleResponse: function(e){ var response = e.detail.response; if (response.status === 'success') { // call succCallback this.fire(succCallback); } } }); </script> </polymer-element>

This does not work. How can I call this function succCallback? Thanks!

+5
source share
4 answers

I do not think because

attributes attr consumes only strings.

A workable solution may be as follows:

 <foo-bar url="/api/getdata" succEventTrigger="foo-bar-done"></foo-bar>

Then attach the listener to the polymer and catch the succEventTrigger

  var fooBar = document.querySelector('foo-bar'); sayHello.addEventListener('foo-bar-done', function(e) { alert('hi'); });

and polymer:

 <polymer-element name="foo-bar" attributes="url succEventTrigger"> <template> <core-ajax id="ajax" method="POST" url="{{url}}" contentType="application/json" handleAs="json" on-core-response="{{handleResponse}}"></core-ajax> </template> <script> Polymer({ succEventTrigger : '', handleResponse: function(e){ var response = e.detail.response; if (response.status === 'success') { // trigger callback event with parameter if needed this.fire(succEventTrigger, { param : value }); } } }); </script> </polymer-element>
+2
source

Try replacing this.fire(succCallback); on this.fire(succCallback()); .

0
source

Editing: I realized a few minutes later that my original answer missed the actual error. The definition of a polymer element is fine, but its use must be wrapped in a template so that you can do something like this:

 <body> <template is="auto-binding"> <foo-bar url="/api/getdata" succCallback="{{func}}"></foo-bar> </template> <script> var scope = document.querySelector('template[is=auto-binding]'); scope.func = function (whatever) { console.log('yay!'); }; </script> </body>

The original answer below may be useful - especially where a callback is used.

Using the "publish" block instead of attributes ... er, attribute (now I understand that this was not the cause of the error):

  <polymer-element name="foo-bar"> <template> <core-ajax id="ajax" method="POST" url="{{url}}" contentType="application/json" handleAs="json" on-core-response="{{handleResponse}}"></core-ajax> </template> <script> Polymer({ publish: { url: undefined, succCallback: undefined, }, ready: function(){ this.url = this.url || "some default"; this.succCallback = this.succCallback || function(){}; }, handleResponse: function(e){ var response = e.detail.response; if (response.status === 'success') { // call succCallback this.succCallback(); } } }); </script> </polymer-element>

I really was looking for the answer to the question: "Is this a template with traction in Polymer, or is it discouraged?" Since the use of callbacks is not even mentioned in Communication and Messaging , I am very curious.

0
source

When creating an instance of your custom polymer element, you need to add parameter brackets to the function names passed as attributes.

i.e. instead:

 <foo-bar url="/api/getdata" succCallback="func"></foo-bar>

do:

 <foo-bar url="/api/getdata" succCallback="func()"></foo-bar>

in accordance with checked and true (but somewhat unfashionable):

 <body onload="handleLoad()"></body>
0
source

Source: https://habr.com/ru/post/1210285/

More articles:


All Articles