gpt4 book ai didi

javascript - 在 Polymer 元素中使用 light dom 中定义的模板

转载 作者:太空狗 更新时间:2023-10-29 15:41:17 25 4
gpt4 key购买 nike

我正在尝试将模板从 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>

我似乎无法在 bt-sortable-list 自定义元素中使用 test.html 中的模板。一般的想法是自定义元素将处理列表和其他事情,同时让使用该元素的 html 定义列表元素的显示方式。我已经尝试以编程方式添加模板,如图所示。我也试过不在 bt-sortable-list 元素下使用模板。我还尝试使用内容元素来获取 test.html 中的模板内容。

如有任何建议,我们将不胜感激。

最佳答案

要使用自定义元素的(light dom)内容,您需要在元素中包含一个插入点(<content>):

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

但是,插入点纯粹是用于渲染影子 DOM 中节点的占位符。您所追求的有点不同,因为它使用 Polymer 的数据绑定(bind)功能来桥接 Polymer 元素外部的 light dom 世界和它内部的 shadow dom 世界。

我能够通过动态创建 <template> 来让事情正常进行在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

关于javascript - 在 Polymer 元素中使用 light dom 中定义的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21522118/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com