rla*_*sch 5 html javascript web-component polymer
我正在尝试将模板从DOM移动到元素内部.
这是我的要素:
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
<polymer-element name="bt-sortable-list" attributes="drag name list">
<template>
BOOM
<template binding ref="itemTemplate" repeat="{{list}}" id="repeatTemplate">
</template>
<template id="itemTemplate">
</template>
</template>
<script>
Polymer('bt-sortable-list', {
ready: function() {
var div = document.createElement('div');
contentStr = this.trim(innerHTML);
var parsed = markdown.toHTML(content);
this.$.itemTemplate.innerHTML = parsed;
this.list = [{name: 'Item 1', id: 'item1'}, {name: 'Item 2', id: 'item2'}, {name: 'Item 3', id: 'item3'}];
this.$.repeatTemplate.model = this.list;
}
});
</script>
</polymer-element>
这是我的html文件:
<!doctype html>
<html>
<head>
<script src="/platform/platform.js"></script>
<link rel="import" href="/bt-sortable-list/bt-sortable-list.html">
</head>
<body>
<h3>Sortable List</h3>
<bt-sortable-list>
<template
Name {{name}}
</template>
</bt-sortable-list>
</body>
</html>
我似乎无法在test.html中获取要在bt-sortable-list自定义元素中使用的模板.一般的想法是自定义元素将处理列表和其他东西,同时让使用该元素的html定义列表元素的显示方式.我已尝试以编程方式添加模板,如图所示.我也试过在bt-sortable-list元素下没有模板.我也尝试使用内容元素来获取test.html中的模板内容.
任何建议将不胜感激.
要使用自定义元素的(light dom)内容,您需要在元素中包含插入点(<content>):
http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees
但是,插入点纯粹是占位符,用于在shadow DOM中呈现节点.您所追求的是有点不同,因为它使用Polymer的数据绑定功能来桥接您的Polymer元素之外的光dom世界,其中包含阴影dom世界.
我能够通过动态创建<template>in ready()并使用ref它来引导它:
var t = document.createElement('template');
t.id = 'itemTemplate';
t.innerHTML = this.innerHTML;
this.list = [{name: 'Item 1', id: 'item1'},
{name: 'Item 2', id: 'item2'},
{name: 'Item 3', id: 'item3'}];
this.shadowRoot.appendChild(t);
演示:http://jsbin.com/IVodePuS/3/edit