[英]Dynamically created html import inside a polymer element (Version 1.0)
在聚合物元素內動態創建html導入
有誰知道如何動態地將html導入添加到聚合物元素(版本1.0)?
下面的代碼似乎不起作用,並抱怨HTML element <link> is ignored in shadow tree.
.. HTML element <link> is ignored in shadow tree.
有沒有人知道這方面或知道更好的方法?
<!-- 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在每個Polymer組件上都有實用函數importHref(href, onLoad, onError)
。 要動態導入和添加外部元素,您可以使用以下代碼:
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導入並使其在另一個元素內部工作,但您需要使用Polymer的DOM API。 看到這里 。
像這樣的東西:
Polymer({is:'my-component',
attached: function(){
//create element and add it to this
var importElem = document.createElement('link');
importElem.rel = 'import';
importElem.href = '/components/my-dynamic-sub-component.html';
Polymer.dom(this.root).appendChild(importElem);
var app = document.createElement('component-controler');
Polymer.dom(this.$.container).appendChild(app);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.