嵌套组件之间的聚合物1.0事件触发

奥斯卡·希门尼斯(Oscar Jimenez)

在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();
},

这有效:http : //jsbin.com/yixinuhahu/edit?html,输出

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

未触发聚合物点击事件

来自分类Dev

内容内的聚合物单击事件不会触发吗?

来自分类Dev

聚合物元素的按键不会触发

来自分类Dev

聚合物元素的按键不会触发

来自分类Dev

聚合物输入捕获输入事件

来自分类Dev

聚合物核心菜单双重事件

来自分类Dev

声明聚合物中的事件

来自分类Dev

聚合物输入变化事件

来自分类Dev

聚合物中的事件处理

来自分类Dev

聚合物标签的点击事件?

来自分类Dev

聚合物核心菜单双重事件

来自分类Dev

单击事件未在聚合物纸张图标按钮中触发

来自分类Dev

属性更改时,聚合物元素不会触发“ on- <property> -changed”事件

来自分类Dev

设置元素属性时不会触发聚合物“属性更改”事件

来自分类Dev

聚合物1.x:“此”对象的事件侦听器范围

来自分类Dev

聚合物1.0中的“聚合物就绪”事件是否与之等效?

来自分类Dev

聚合物linkPaths不能随时随地触发

来自分类Dev

手动触发聚合物铁ajax请求

来自分类Dev

聚合物铁ajax /铁请求不会触发

来自分类Dev

聚合物 2.0 铁形式反应触发 dom-if

来自分类Dev

似乎没有聚合物布局事件

来自分类Dev

聚合物:从父级捕获子级元素的事件

来自分类Dev

聚合物就绪事件后,querySelector找不到元素

来自分类Dev

聚合物添加事件监听器

来自分类Dev

聆听该元素外部的聚合物附着事件

来自分类Dev

纸纽扣聚合物元素上的错误轻按事件

来自分类Dev

获取事件中单击的聚合物元素

来自分类Dev

聚合物-无法单击元素外部的事件以自行关闭

来自分类Dev

在聚合物上的on- *事件中发送数据