Question

我目前正致力于将延迟加载与＆＃34;更多路由＆＃34;在聚合物中。我已经有了第一个延迟加载的工作实现（灵感来自app-router，遗憾的是它不完全支持Polymer 1.0），但我不知道如何将所有事件从导入的子元素传递到我的lazy-loading元素。

所以，在我的例子中，我希望事件＆＃34;嗨＆＃34;从页面登录传递到lazy-loader，从lazy-loader向上传递到包含lazy-loader的元素 - 但是不知道lazy-loader中的那个特定事件。所以我需要类似＆＃34;抓住所有由子元素＆＃34;。

发起的事件

这就是我所拥有的：

页登录：

ready:function() {
                this.fire("hi");
            },

使用lazy-loader：

<lazy-loader on-hi="hi" href="../pages/page-login.html" id="login" route="login"></lazy-loader>

调用load：

document.getElementById("login").load()

Lazy-loader（简化版）：

<dom-module id="lazy-loader">
<template>
    <span id="content">Loading...</span>
</template>
<script>
    window.lazyLoaded = window.lazyLoaded || [];
    Polymer({
        is: "lazy-loader",
        properties: {
            href:{
                type:String,
                value:""
            },
            element:{
                type:String,
                value:""
            }
        },
        load:function(finishFunc) {
            if(window.lazyLoaded.indexOf(this.href)===-1) {
                var that = this;
                this.importHref(this.href, function(e) {
                    window.lazyLoaded.push(that.href);
                    if(!that.element) {
                        that.element = that.href.split('/').reverse()[0];
                        that.element = that.element.split(".")[0];
                    }
                    var customElement = document.createElement(that.element);

// here I need something like "customElement.on("anyEvent")" 
// => that.fire("anyEvent")

                    Polymer.dom(that.$.content).innerHTML = "Loading done.";
                    Polymer.dom(that.$.content).appendChild(customElement);
                    Polymer.dom.flush();
                    that.fire("loaded");
                });
            }
        }
    });
</script>

Answer 1

似乎我必须撤销我的问题 - 如果我在附加处理程序中触发事件，而不是准备好，它会自动传递 - 至少在当前版本的Polymer中。不确定这是否是预期的行为，但目前问题已解决。答案仍然很有趣，可能对于其他情况（如事件记录）

Polymer捕获子元素

1 个答案: