在HTML文件中像CSS一样包含模板文件？

Question

在HTML文件中像CSS一样包含模板文件？

javascripthtmlhtml-importshtml5-template

10

我正在使用HTML <template>元素。从代码上看，每个HTML文件中保持正确的模板集合似乎很不方便。

是否可以将模板放在单独的文件中？我想要像CSS那样，在HTML文件的部分包含CSS文件：

<link rel="stylesheet" type="text/css" href="mystyle.css">

我的应用程序使用了几个<template>集合。它们可以放在一个单独的文件中吗？还是每个<template>定义都需要直接成为原始HTML文件的一部分？

- cc young

1

请问您能否提供更多信息？我不太理解这个问题。 - Marty

你可以研究一下Jade或JavaScript框架，例如AngularJS，它们都允许模板化。React和EmberJS也很受欢迎，我相信它们也支持模板化。 - rcheuk

@Marty - 我认为这更清晰了。 - cc young

1

@harmlessdragon - 我认为HTML5模板得到了很好的支持。请参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template和http://caniuse.com/#feat=template。对我来说，Angular是一场噩梦。现在我正在尝试使用模板和Web服务创建自己的React风格的控制器/组件/存储。 - cc young

@ccyoung，我一旦看到有答案出现，就知道我会学到东西。 :) 谢谢。 - rcheuk

3个回答

5

您需要使用HTML 5才能实现以下内容：

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

- Abs

是的，这会将模板放入HTML文件中。我想要的是将模板存储在单独的文件中，就像样式表将样式放入单独的文件中一样，以保持清晰明了。 - cc young

@Mi-Creativity - 是的，像往常一样。但似乎Edge是兼容的。 - cc young

然而，使用此浏览器仍然受到限制。http://caniuse.com/#feat=imports - Abs

@Mi-Creativity - 你说得对 - 这里需要使用 import。你能否将其添加为答案？如果不行，我明天会把它作为答案记录下来。谢谢。 - cc young

@ccyoung，建议使用 import 的是 Abs 而不是我，我只是展示了它目前的支持链接。 - Mi-Creativity

显示剩余2条评论

-1

不幸的是，

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

无法正常工作。

整个stuff.html被固定在head中作为html的一部分，因此在实际操作中无法访问。

换句话说，使用`document.querySelector()`无法找到在stuff.html中定义的模板，因此脚本无法使用它。

就我而言，我真的不理解现在import的任何优点 - 要使其有用，它需要剥离（而不是添加）所有外部html，然后将内容附加到head中 - 而不是当前的操作。

- cc young

实际上，您可以使用链接元素的导入属性访问导入的HTML文件的内容。 - Supersharp

@Supersharp，你能举个使用 document.querySelector() 的例子吗？ - cc young

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supersharp · Accepted Answer

2020年更新

现在HTML导入已经被弃用，你可以使用fetch()来下载HTML代码：

最初的回答：

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 )
} ()

最初的回答

假设我们想要在名为templates.html的文件中导入一堆<template>。

在主页index.html中，我们可以通过HTML Imports来导入该文件：

<link rel="import" href="templates.html" id="templates">

在导入的文件templates.html中，添加一个或多个所需的模板：

<template id="t1">
     <div>content for template 1</div>
</template>

<template id="t2">
     content for template 2
</template>

导入的文档可以从 <link> 元素的 import 属性中获取。您可以在其上使用 querySelector。"Original Answer" 的翻译是 "最初的回答"。

<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>

注意：您可以将上述脚本放置在主文档中，也可以放置在导入的文档中，因为导入文件中的<script>会在解析时立即执行（在下载时）。

最初的回答：请注意，您可以将上述脚本放置在主文档或导入的文档中，因为导入文件中的<script>会在解析时立即执行（在下载时）。