可以在类似于css的html文件中包含`templates`吗？

使用html templates。在代码方面，很难为每个html文件保留一组正确的模板。可以在类似于css的html文件中包含`templates`吗？

是否有可能拥有一个模板文件，很像css文件，其中一个包含在html文件的head部分？

例如，以补充style节head，一个可以链接到一个样式，例如，

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

我的应用程序使用的templates多个集合。可以像样式表一样处理它们，即链接到单独的文件中，还是每个template定义都需要直接作为原始文件html的一部分？

来源

2015-11-17 cc young

请问您可以添加更多信息 - 我真的不明白这个问题。 – Marty

例如，您可以查看允许模板化的jade或javascript框架 - angularjs。反应和emberjs也很受欢迎，我相信他们也支持模板。 – rcheuk

@Marty - 我认为这更清晰 –

想象一下，我们想要在一个名为templates.html的单独文件中导入一堆<template>。

在（主）主页的index.html，我们可以通过导入进口HTML文件：

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

<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> s的一旦被解析（在下载时）执行。

来源

2016-10-05 11:35:47 Supersharp

非常好。这解决了一切 –

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

您需要HTML 5虽然

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

来源

2015-11-17 04:45:45 Abs

不错，但又一次，IE糟糕http://caniuse.com/#search=template –

是的，这会将模板放入html文件中。我所追求的是将模板存储在一个单独的文件中，就像样式表将样式放入单独的文件中一样，以保持完整。 –

@米创意 - 是的，像往常一样。但似乎边缘是合规的。 –

不幸的是，

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

不不工作。

整个stuff.html作为head的一部分被卡在html中，并且出于所有实际目的都无法访问。

换句话说，一个template defined in stuff.html cannot be found using document.querySelector（）`，因此对脚本不可用。

FWIW，我真的不明白的import现在的工作方式有什么优势 - 它是它需要剥离（而不是增加）所有在外HTML其追加的内容head之前的任何好 - 不是目前的行动。

来源

2016-01-02 09:32:38

实际上，您可以使用link元素的import属性来访问导入的HTML文件的内容。 – Supersharp

@Supersharp你可以用'document.querySelector（）'来举个例子吗？ –

可以在类似于css的html文件中包含`templates`吗？

回答

相关问题