【发布时间】:2015-11-13 12:26:12
【问题描述】:
我目前正在努力使延迟加载和 Polymer 中的“更多路由”成为可能。我已经获得了延迟加载的第一个工作实现(受不幸的是不完全支持 Polymer 1.0 的 app-router 启发),但我不知道如何将所有事件从导入的子元素传递到我的延迟加载元素。
因此,在我的示例中,我希望事件“hi”从 page-login 传递到lazy-loader,并从lazy-loader 向上传递到包含lazy-loader 的元素——但不知道lazy-loader 中的特定事件.所以我需要类似“捕获子元素触发的所有事件”之类的东西。
这就是我所拥有的:
页面登录:
ready:function() {
this.fire("hi");
},
使用惰性加载器:
<lazy-loader on-hi="hi" href="../pages/page-login.html" id="login" route="login"></lazy-loader>
调用负载:
document.getElementById("login").load()
懒加载器(精简版):
<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>
【问题讨论】:
-
作为一个侧节点:我目前正在考虑扫描以“on-”开头的惰性加载器的属性,并为此事件添加“pass-through-listeners”。我仍然对更通用的方式持开放态度(不解析属性)。