简体   繁体   English

聚合物1.0中的处理程序委派

[英]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. https://github.com/PolymerElements/iron-ajax/releases/tag/v1.0.5真可惜。

Original question: 原始问题:

I wanted to create custom ajax component based on iron-ajax to add couple of custom headers and handlers. 我想基于iron-ajax创建自定义ajax组件,以添加几个自定义标头和处理程序。 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. 尽管尚未实现自定义元素继承,但我只是将iron-ajax添加到了my-ajax中,并打算将所有api委托给iron-ajax,这与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. 在my-ajax elt中没有定义响应响应处理程序,但handleResponse仍被调用。

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. 据我了解,发生这种情况是因为Polymer.Base._addFeature._createEventHandler(polymer.html:345)使用顶级elt的“ this”作为处理程序方法定义的“宿主”。

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. 大多数事件都会冒泡,因此您可以通过放置在my-ajax实例上的处理程序看到response事件从my-ajaxmy-elt范围。 This happens identically to a click event bubbling from a lower scope to an upper scope. 这与click事件从较低范围到较高范围冒泡的情况相同。

So answer is: "feature" (of the web platform, more than Polymer itself). 答案是:“功能”(网络平台的功能,而不是Polymer本身)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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