可以在类似于 css 的 html 文件中包含 `templates` 吗? [英] can one include `templates` in a html file similar to css?
问题描述
使用 html templates
.在代码方面,很难为每个 html 文件保留正确的模板集.
是否有可能有一个模板文件,就像一个 css
文件,它包含在 html 的
文件?head
部分
例如,为了补充head
中的style
部分,可以链接到样式表,例如
我的应用程序使用了多个 模板
集合.它们可以像样式表一样处理,即链接到单独的文件中,还是每个 template
定义都需要直接成为原始 html
文件的一部分?
假设我们想在一个名为 templates.html的单独文件中导入一堆 em>.
在(主)主页 index.html 中,我们可以通过 HTML Imports 导入文件:
在导入的文件templates.html中,根据需要添加一个或任意多个模板:
<div>模板 1 的内容</div>模板><模板id="t2">模板 2 的内容模板>
导入的文档可从 元素的
import
属性获得.您可以在其上使用 querySelector
.
注意:您可以将上述脚本放在主文件中,也可以放在导入的文件中,因为导入文件中的会立即执行因为被解析(在下载时).
2020 年更新
既然 HTML 导入已被弃用,您可以使用 fetch()
下载 HTML 代码:
void async function () {//在模板中获取导入的文档:var 模板 = document.createElement('模板')templates.innerHTML = await ( await fetch( 'templates.html' ) ).text()//获取模板2 1和2:var template1 = templates.content.querySelector( '#t1' )var template2 = templates.content.querySelector('#t2')控制台.log(模板2)} ()
working with html templates
. code-wise, it's difficult to keep the right set of templates with each html file.
is it possible to have a file of template(s), much like a file of css
, that one includes in the head
section of the html
file?
for example, to supplement the style
section in head
, one can link to a stylesheet, eg,
<link rel="stylesheet" type="text/css" href="mystyle.css" >
my app uses several collections of templates
. can they be handled similar to stylesheets, ie, linked to in a separate file, or does each template
definition need to be directly part of the original html
file?
Imagine we want to import a bunch of <template>
s in a separate file called templates.html.
In the (main) homepage index.html, we can import the file via HTML Imports:
<link rel="import" href="templates.html" id="templates">
In the imported file templates.html, add one or as many templates as you need:
<template id="t1">
<div>content for template 1</div>
</template>
<template id="t2">
content for template 2
</template>
The imported document is available from the import
property of the <link>
element. You can use querySelector
on it.
<script>
//get the imported document in doc:
var link = document.querySelector( 'link#templates' )
var doc = link.import
//fetch template2 1 and 2:
var template1 = doc.querySelector( '#t1' )
var template2 = doc.querySelector( '#t2' )
</script>
Note: you can place the above script in the main document, or in the imported one because the <script>
s inside an imported file are executed as soon as the are parsed (at download time).
2020 Update
Now that HTML Imports have been deprectated, you could use fetch()
to download HTML code:
void async function () {
//get the imported document in templates:
var templates = document.createElement( 'template' )
templates.innerHTML = await ( await fetch( 'templates.html' ) ).text()
//fetch template2 1 and 2:
var template1 = templates.content.querySelector( '#t1' )
var template2 = templates.content.querySelector( '#t2' )
console.log( template2 )
} ()
这篇关于可以在类似于 css 的 html 文件中包含 `templates` 吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!