在Polymer 1.0中,我有一个与Web组件的嵌套结构内的事件传播有关的问题。特别是,我试图wc-split
通过wc-split-rule
位于其本地DOM中的其他命名组件的集合来动态配置命名的Web组件。以下代码段显示了正确的使用方式:
<wc-split-test>
<wc-split>
<wc-split-rule key="{{k1}}" ...></wc-split-rule>
<wc-split-rule key="{{k2}}" ...></wc-split-rule>
<wc-split-rule key="{{k3}}" ...></wc-split-rule>
</wc-split>
</wc-split-test>
从前面的示例中可以看出,目标是向wc-split
组件提供key
每个wc-split-rule
组件内属性的值。当我们需要动态重新配置功能时,体系结构策略将从每次key
遇到属性更改时触发事件开始,然后通过冒泡到达wc-split
组件进行处理来促进这些更改。
当[1]都在带有文字值的纯HTML上下文中以及[2]在具有数据绑定值的组件模板中进行测试时,遵循的方法可以正常工作。但是,[3]当使用文字值在组件模板中对其进行测试时,不会促进更改。似乎事件传播被忽略或中定义的侦听wc-split
器无法捕获事件:
<wc-split-test>
<wc-split> <!-- does not work -->
<wc-split-rule key="k1" ...></wc-split-rule>
<wc-split-rule key="k2" ...></wc-split-rule>
<wc-split-rule key="k3" ...></wc-split-rule>
</wc-split>
</wc-split-test>
以下清单显示了两个组件[ https://goo.gl/OkU9jQ]的实现:
<dom-module id="wc-split-rule">
<script>
Polymer({
is: 'wc-split-rule',
properties: {
key : {
type: String,
reflectToAttribute: true,
notify: true,
value: '',
observer: '_changed'
},
},
_changed: function (){
this.fire('wc-split-rule', {
key : this.key,
});
}
});
</script>
</dom-module>
<dom-module id="wc-split">
<template>
<content></content>
</template>
<script>
Polymer( {
is: 'wc-split',
listeners: {
'wc-split-rule': 'onRule'
},
ready: function(){
...
},
onRule: function (event, context){
... // this is executed in test [1] and [2] NOT in [3]
}
});
</script>
</dom-module>
<dom-module id="wc-split-test">
<template>
<wc-split id="split">
<wc-split-rule key="e1"/>
</wc-split>
</template>
<script>
...
</script>
</dom-module>
令人惊讶的是,Polymer 0.5上的相同代码对于每种测试场景都可以正常工作[ https://goo.gl/CHV3JE]:
<polymer-element name="wc-split-rule">
<script>
Polymer('wc-split-rule', {
publish : {
key : '',
},
observe: {
key : '_changed',
},
_changed: function (){
this.fire('wc-split-rule', {
key : this.key,
});
}
});
</script>
</polymer-element>
<polymer-element name="wc-split">
<template>
<div on-wc-split-rule="{{onRule}}">
<content select="wc-split-rule"></content>
</div>
<content></content>
</template>
<script>
Polymer('wc-split', {
ready: function(){
...
},
onRule: function (event, context){
... // this is always executed
}
});
</script>
</polymer-element>
<polymer-element name="wc-split-test">
<template>
<wc-split id="split">
<wc-split-rule key="e1"/>
</wc-split>
</template>
<script>
...
</script>
</polymer-element>
这归结为时间问题。该wc-split-rule
事件在wc-split
元素注册之前触发。因此,该事件被错过。第一次启动b / c元素时,只有一个父元素也是一个自定义元素,这只是一个问题。解决此问题的一种方法是确保事件在wc-split-rule
附加后触发:
attached: function() {
this._changed();
},
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句