谁能告诉我如何根据一个聚合物属性的值导入一个元素?我以为我可以使用数据绑定,但是…这行不通。是否可以动态导入元素?
代码示例:
<link rel="import" href="app-window/{{name}}-app.html">
//This was my first idea (obviously doesn't work)
<polymer-element name="window-base" attributes="name" >
<template>
<link rel="stylesheet" href="window-base.css">
<section id="app">
<!--here will go the instance-->
</section>
</template>
<script>
Polymer('window-base', {
name: "Finder",
ready: function () {
this.instanceApp();
},
instanceApp: function () {
//this depends on the import made
var app=document.createElement(this.name + "-app");
this.$.app.appendChild(app);
}
});
</script>
</polymer-element>
谢谢!
根据Polymer 1.0迁移指南:
全局聚合物。import函数由importif代替。新方法可以像this. importif一样从元素中调用。外一个元素,它可以被称为polymer . base . importif .
所以…
this.importHref(["yourComponent.html"], function() {})
这是我动态导入元素的方法。我使用硫化器将我的元素分解成逻辑模块。然后我使用Polymer.import:
聚合物0.5Polymer.import( ['/elements/'+this.module+'-module.html'], function() {
console.log('/elements/'+this.module+'-module.html loaded');
this.onComplete();
}.bind(this));
更新聚合物1.0
直接使用link[rel="import"]标签
var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', 'elements/app-module.html');
document.body.appendChild(link)
这样怎么样?我还没有测试过其中的一些(WebComponentsReady事件可能只在窗口上触发),但如果你可以发布一个jsbin或codepin,这将有所帮助:
Polymer('window-base', {
name: 'Finder',
domReady: function() {
this.nameChanged();
},
nameChanged: function() {
var importElem = document.createElement('link');
importElem.rel = 'import';
importElem.href = 'app-window/' + name + '-app.html';
importElem.addEventListener('WebComponentsReady', function() {
var app = document.createElement(this.name + "-app");
this.$.app.appendChild(app);
}.bind(this));
this.appendChild(importElem);
}
});
可接受的解决方案也适用于聚合物2
链接到Polymer 2 importHref docs
Polymer.importHref([`bower_components/${plugin}/${plugin}.html`], () => {
//on load
}