Javascript 聚合：如何动态导入元素

谁能告诉我如何根据聚合属性的值导入元素？ 我想我可以使用数据绑定，但是。。。它不起作用了。是否可以动态导入元素

代码示例如下：

<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>

//这是我的第一个想法（显然行不通）
聚合物（“窗基”{
名称：“查找者”，
就绪：函数（）{
这个.instanceApp（）；
},
instanceApp:函数（）{
//这取决于进口量
var app=document.createElement（this.name+“-app”）；
此.$.app.appendChild（app）；
}
});

---

谢谢

像这样的东西怎么样？我还没有测试过其中的一些（WebComponentsReady事件可能只在Windows上启动），但是如果您可以发布一个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);
  }
});

---

这是我用于动态导入元素的方法。我习惯于将元素拆分为逻辑模块。然后我使用Polymer.import：

聚合物0.5

Polymer.import( ['/elements/'+this.module+'-module.html'], function() {
    console.log('/elements/'+this.module+'-module.html loaded');
    this.onComplete();
}.bind(this));

更新聚合物1.0

只需使用link[rel=“import”]标记即可

---

根据聚合物1.0迁移指南：

全局Polymer.import函数替换为importHref。新的 方法可以从元素this.importHref调用。外 元素，可以称为Polymer.Base.importHref

所以

---

公认的解决方案也适用于聚合物2

链接到

---

好的，谢谢。一个问题，这个方法在哪里？我是说你把它放哪儿了？在“准备就绪”事件中？在聚合物构造器外…抱歉，没有添加。我在普通方法调用中的另一个自定义元素中使用它。基本上，我的应用程序加载聚合物和一些自定义元素，检查标志，然后根据标志加载模块（更多元素）。我的猜测是，在“Polymer ready”窗口事件触发后，您可以随时使用Polymer.import（）。这在stable上目前可以正常工作，但在Canary上会断开。如果在导入回调中立即创建该元素，则该元素不会准备就绪。启动ready（）回调大约需要1-100毫秒。这在版本1.0中不起作用：（有人知道最新的导入方法是什么吗？@7imm我只使用了link标记，请参见上文。我尝试了这个解决方案，但没有成功-结果我形成了自己的问题：您好，由于这些答案，您是否成功构建了一个可以将属性作为另一个元素的元素？

var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', 'elements/app-module.html');
document.body.appendChild(link)

this.importHref(["yourComponent.html"], function() {})

Polymer.importHref([`bower_components/${plugin}/${plugin}.html`], () => {
    //on load
}