javascript - Polymer：如何动态导入元素

Question

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

这里的代码示例：

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

谢谢！

Answer 1

根据 Polymer 1.0 迁移指南：

全局 Polymer.import 函数被 importHref 取代。可以从 this.importHref 等元素调用新方法。在元素之外，它可以称为 Polymer.Base.importHref。

所以...

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

Answer 2

这是我用于动态导入元素的方法。我使用vulcanizer将我的元素拆分为逻辑模块。然后我使用 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

只需使用链接[rel="import"] 标签

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

Answer 3

这样的事情呢？我还没有测试过其中的一些（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);
  }
});

Answer 4

公认的解决方案也适用于 Polymer 2

链接到Polymer 2 importHref 文档

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