Polymer callback as an attribute

Question

Not so long ago I noticed that iron-ajax uses an attribut on-response="callbackFn" to execute once a response is received.

My question is simply how does this work?

I have a similar situation where I would like create a component that is able to take a callback as an attribute but I can't figure out how to do it.

Two things I noticed

1. When triggered the function is correctly bound to the Polymer element from which it came.
2. "callbackFn" is the name of a function. Not a polymer binding.

So I assumed iron-ajax must be doing some trickery in the background to bind the given function referenced by function name. When I looked at the source code though I don't see any handling of the 'on-response' attribute. none, zilch, nada. what gives?

I can see that there is a _boundedHandleResponse but that property does not seem to be bound to the on-response function at any point.

source

Answer 1

_boundedHandleResponse is a function which is value depends upon the _handleResponse function.

_boundHandleResponse: {
  type: Function,
  value: function () {
    return this._handleResponse.bind(this);
  }
}

So, if you check the _handleResponse function there is a 'response' event which is dispatched using the code :

this.fire('response', request, {
  bubbles: this.bubbles,
  composed: true
});

In polymer element we add event listeners using on-event annotations. For example on-tap, on-click. So, every time response is dispatched it will call the function defined as on on-response="callbackFn" which will call the "callbackFn" function.