在聚合物元素内部动态创建html导入（版本1.0） [英] Dynamically created html import inside a polymer element (Version 1.0)

问题描述

在聚合物元素中动态创建html导入

有谁知道如何动态地将html导入添加到聚合物元素中（1.0版）？ b
$ b

下面的代码似乎不起作用，并抱怨..
HTML元素< link>在影子树中被忽略

有人知道任何方法或知道更好的方法吗？

 <！ - 这里是创建的导入可以去的地方 - > 
 
< dom-module id =my-component> 
 
 <！ - 这里是我理想喜欢创建导入的地方 - > 
 
< template> 
< div id =container> 
 
 <！ - 这是我的动态加载元素应该放置的地方 - > 
 
< / div> 
< / template> 
 
< script> 
 Polymer（{is：'my-component'，
 attached：function（）{
 
 var importElem = document.createElement（'link'）; 
 importElem .rel ='import'; 
 importElem.href ='/components/my-dynamic-sub-component.html'; 
 this.root.appendChild（importElem）; 
 var app = document.createElement（'my-dynamic-sub-component'）; 
 this。$。container.appendChild（app）; 
 $ b} 
}）; 
< / script> 
 
< / dom-module> 
  

解决方案

Polymer 1.0具有实用功能 importHref（href，onLoad，onError）在每个Polymer组件上。要动态地导入和添加外部元素，您可以使用以下代码：

  this.importHref（'path / to / page.html '，function（e）{
 // e.target.import是导入文档
 var newElement = document.createElement（'new-element'）; 
 newElement.myProperty =' foo'; 
 
 Polymer.dom（this。$。container）.appendChild（newElement）; 
}，function（e）{
 //加载错误
 }）; 
  

Dynamically created html import inside a polymer element

Does anyone know how to dynamically add a html import into a polymer element (version 1.0)?

The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree.

Does anyone know any way around this or know a better way?

<!-- here is where the created import could go -->

<dom-module id="my-component">

<!-- here is where I'd ideally like the import to be created -->

  <template>
    <div id="container">

      <!--This is where my dynamically loaded element should be placed-->

    </div>
  </template>

  <script>
    Polymer({is:'my-component',
      attached: function(){

        var importElem = document.createElement('link');
        importElem.rel = 'import';
        importElem.href = '/components/my-dynamic-sub-component.html';
        this.root.appendChild(importElem);
        var app = document.createElement('my-dynamic-sub-component');
        this.$.container.appendChild(app);

      }
    });
  </script>

</dom-module>

解决方案

Polymer 1.0 has the utility function importHref(href, onLoad, onError) on every Polymer component. To dynamically import and add your external element you could use this code:

this.importHref('path/to/page.html', function(e) {
  // e.target.import is the import document.
  var newElement = document.createElement('new-element');
  newElement.myProperty = 'foo';

  Polymer.dom(this.$.container).appendChild(newElement);  
}, function(e) {
  // loading error
});

这篇关于在聚合物元素内部动态创建html导入（版本1.0）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！