聚合物 1.0 中的处理程序委托
Handlers delegation in polymer 1.0
更新:响应和错误事件不再冒泡。 https://github.com/PolymerElements/iron-ajax/releases/tag/v1.0.5
可惜了
原问题:
我想基于 iron-ajax 创建自定义 ajax 组件,以添加几个自定义 headers 和处理程序。虽然自定义元素继承尚未实现,但我只是将 iron-ajax 添加到 my-ajax 并将所有 api 委托给 iron-ajax,这与 generateRequest 一起工作得很好。
但是当谈到处理程序方法时,我注意到它可以在没有任何委托的情况下工作。 my-ajax elt 中没有定义 on-response 处理程序,但仍会调用 handleResponse。
据我了解,发生这种情况是因为 Polymer.Base._addFeature._createEventHandler (polymer.html:345)
使用 'this',即 top-level elt,作为处理程序方法定义的 'host'。
所以问题是:它是错误还是功能?
示例代码:
<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>
大多数事件冒泡,因此您只是看到 response
事件通过放置在 my-ajax
实例上的处理程序从 my-ajax
冒泡到 my-elt
范围。这与从较低范围冒泡到较高范围的 click
事件完全相同。
所以答案是:"feature"(网络平台,超过 Polymer 本身)。
更新:响应和错误事件不再冒泡。 https://github.com/PolymerElements/iron-ajax/releases/tag/v1.0.5 可惜了
原问题:
我想基于 iron-ajax 创建自定义 ajax 组件,以添加几个自定义 headers 和处理程序。虽然自定义元素继承尚未实现,但我只是将 iron-ajax 添加到 my-ajax 并将所有 api 委托给 iron-ajax,这与 generateRequest 一起工作得很好。
但是当谈到处理程序方法时,我注意到它可以在没有任何委托的情况下工作。 my-ajax elt 中没有定义 on-response 处理程序,但仍会调用 handleResponse。
据我了解,发生这种情况是因为 Polymer.Base._addFeature._createEventHandler (polymer.html:345) 使用 'this',即 top-level elt,作为处理程序方法定义的 'host'。
所以问题是:它是错误还是功能?
示例代码:
<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>
大多数事件冒泡,因此您只是看到 response
事件通过放置在 my-ajax
实例上的处理程序从 my-ajax
冒泡到 my-elt
范围。这与从较低范围冒泡到较高范围的 click
事件完全相同。
所以答案是:"feature"(网络平台,超过 Polymer 本身)。