gpt4 book ai didi

Polymer:从另一个文件导入和绑定(bind)模板

转载 作者:行者123 更新时间:2023-12-04 16:09:18 26 4
gpt4 key购买 nike

是否可以从另一个文件导入模板?我能够导入 javascript 和样式表,但不知道如何导入 html 模板。

例如:

我在 中定义了各种内容项模板模板.html

<template id="hello>Hello {{ li.name }}</template>
<template id="hey">Hey!</template>

然后,我想重新使用 中的模板。 list.html
<link rel="import" href="templates.html">

<polymer-element name="list" attributes="type,data">

<template>

<template repeat="{{ li in items_in_data }}">
<template bind ref="hey"></template>
<template bind ref="{{ type }}"></template>
</template>

</template>


</polymer-element>

最后,在 app.html
<list data="items.json" type="hello"></list>

如果我将 templates.html 中的内容放入 list.html 中,它可以正常工作。但是,使用 <link rel="import"> 时似乎没有加载或引用.有任何想法吗?

最佳答案

部分解决方案:以下适用于 chrome 但不适用于 polyfill 浏览器(例如 firefox)。需要查看 polyfill 代码以找出如何处理已链接文件中的链接。

问题是导入的内容没有插入到文档中,而只是可供使用。见 HTML5 Rocks imports - using content更多细节。您可以在链接文件中找到所有模板并将它们插入到 polymer 元素的文档片段中:

var importDoc = document.currentScript.ownerDocument;
var link = importDoc.querySelector('.myimports');
var templates = link.import.querySelectorAll('template');
for (var i=0;i<templates.length;i++) {
importDoc.head.appendChild(templates[i]);
}

例子

演示模板.html
<template id="hello">Hello World!</template>
<template id="goodbye">See you tomorrow</template>

演示-importTemplates-list.html
<link class="myimports" rel="import" href="demo-templates.html">

<polymer-element name="demo-importTemplates-list">
<template>
<template repeat="{{ li in data }}">
<h1>{{li}}</h1>
<template bind ref="hello"></template> -- <template bind ref="goodbye"></template>
</template>
</template>
<script>
Polymer({
data: ['first','second','third']
});

// http://www.html5rocks.com/en/tutorials/webcomponents/imports/#usingcontent
// http://www.html5rocks.com/en/tutorials/webcomponents/imports/#include-templates
var importDoc = document.currentScript.ownerDocument;
var link = importDoc.querySelector('.myimports');
var templates = link.import.querySelectorAll('template');
for (var i=0;i<templates.length;i++) {
importDoc.head.appendChild(templates[i]);
}
</script>
</polymer-element>

索引.html
<html lang="en">
<head>
<script src="../../webcomponents/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
<link rel="import" href="demo-importTemplates-list.html">
<title>demo-importTemplates</title>
</head>
<body>
<demo-importTemplates-list type="hello"></demo-importTemplates-list>
</body>
</html>

关于Polymer:从另一个文件导入和绑定(bind)模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26051219/

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