简体   繁体   中英

Handlers delegation in polymer 1.0

UPDATE : The response and error events no longer bubble. https://github.com/PolymerElements/iron-ajax/releases/tag/v1.0.5 what a pity.

Original question:

I wanted to create custom ajax component based on iron-ajax to add couple of custom headers and handlers. While custom element inheritance is not yet implemented I just added iron-ajax to my-ajax and was going to delegate all api to the iron-ajax, this worked fine with generateRequest.

But when it got to handler methods I noticed that it works without any delegation. There is no on-response handler defined in my-ajax elt but handleResponse is still invoked.

As far as I understand, this happens because Polymer.Base._addFeature._createEventHandler (polymer.html:345) uses 'this', which is top-level elt, as 'host' for handler methods definitions.

So the question is: is it bug or feature?

The example code:

 <link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html"> <link rel="import" href="https://raw.githubusercontent.com/PolymerElements/iron-ajax/master/iron-ajax.html"> <dom-module id="my-ajax"> <template> <iron-ajax id="ironAjax" url="http://echo.jsontest.com/key/value/otherkey/othervalue" handle-as="json" debounce-duration="300" > </iron-ajax> </template> <script> Polymer({ is: "my-ajax", generateRequest: function(){ this.$.ironAjax.generateRequest(); } }); </script> </dom-module> <dom-module id="my-elt"> <template> <button on-click="buttonClick">Button</button> <my-ajax id="myAjax" on-response="handleResponse"> </my-ajax> </template> <script> Polymer({ is: "my-elt", buttonClick: function(){ this.$.myAjax.generateRequest(); }, handleResponse: function(event) { alert('got response'); } }); </script> </dom-module> <my-elt></my-elt> 

Most events bubble, so you are just seeing the response event bubble out of my-ajax to the my-elt scope via the handler placed on the my-ajax instance. This happens identically to a click event bubbling from a lower scope to an upper scope.

So answer is: "feature" (of the web platform, more than Polymer itself).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM