在聚合物元素中动态创建 html 导入(版本 1.0)
Dynamically created html import inside a polymer element (Version 1.0)
动态创建 html 在聚合物元素中导入
有谁知道如何将 html 导入动态添加到聚合物元素(版本 1.0)中?
下面的代码似乎不工作并抱怨..
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>
我不确定您是否可以动态添加 HTML 导入并让它在另一个元素中工作,但您需要使用 Polymer 的 DOM API。参见 here。
像这样:
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);
}
});
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 在聚合物元素中导入
有谁知道如何将 html 导入动态添加到聚合物元素(版本 1.0)中?
下面的代码似乎不工作并抱怨..
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>
我不确定您是否可以动态添加 HTML 导入并让它在另一个元素中工作,但您需要使用 Polymer 的 DOM API。参见 here。
像这样:
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);
}
});
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
});