How to add function attribute to polymer element

Question

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!

Answer 1

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>