CODEWITHSUNDEEP
javascriptpolymer
Jie
Jie

Reputation: 43

How to add function attribute to polymer element

I want to create a polymer element with function attribute, which will be called when getting a success response.

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

It doesn't work. How can I call this succCallback function? Thanks!

Upvotes: 4

Views: 3353

Answers (4)

Benjineer
Benjineer

Reputation: 1680

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

i.e. instead of:

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

do:

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

as per the tried and true (yet somewhat unfashionable):

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

Upvotes: 0

ggranum
ggranum

Reputation: 1060

Edit: I realized a few minutes late that my initial reply missed the actual point of failure. The polymer element definition is fine, but the use of it needs to 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 reply below might still be helpful - especially where the callback is used.

Using the 'publish' block instead of the attributes... er, attribute (I realize now that this wasn't 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 was actually searching for an answer to 'is this a pattern with traction in Polymer, or is it discouraged?'. As the use of callbacks isn't even mentioned in the Communication and Messaging docs I am quite curious.

Upvotes: 0

Eugene P.
Eugene P.

Reputation: 2625

I think no way, because

attributes attr consumes only strings.

Workable solution might be the following: 

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

Then, attach listener to the polymer and catch 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>

Upvotes: 2

SalmonKiller
SalmonKiller

Reputation: 2203

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

Upvotes: 0

Related Questions