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

Question

我在 Polymer 1.0 中遇到与 Web 组件嵌套结构内的事件传播相关的问题。特别是，我试图通过位于其本地 DOM 中的名为 wc-split-rule 的其他组件的集合来动态配置名为 wc-split 的 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 组件提供每个 wc-split-rule 组件中 key 属性的值。由于我们需要动态重新配置功能，架构策略首先在每次满足 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>

Answer 1

这归结为时间问题。 wc-split-rule 事件在您的 wc-split 元素注册之前触发。因此，该事件被错过了。这只是元素首次启动时的问题 b/c 你有一个父元素，它也是一个自定义元素。解决此问题的一种方法是确保在附加 wc-split-rule 后触发事件：

attached: function() {
  this._changed();
},

这个有效：http://jsbin.com/yixinuhahu/edit?html,output

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

polymer 1.0 event firing among nested components

events

listener

polymer

polymer-1.0