可以在類似於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`嗎？

回答

相關問題