參考外部JavaScript模板

我正在使用jsrender作爲JavasScript模板引擎。用法很簡單：參考外部JavaScript模板

在HTML頁面中，定義與模板編輯HTML內容的腳本標籤：

<script id="myTemplate" type="text/x-jsrender"> 
    <div>{{:name}} ({{:year}})</div> 
</script> 
... 
<body> 
<div id="content"></div> 
</body>

在JavaScript中，定義一個變量，並調用渲染功能與模板：

var model = { 
    name: "Findekano", 
    year: 2012 
}; 

$('#content').html($('#myTemplate').render(model));

的問題是：

我不想保留模板定義的HTML網頁，我會喜歡將它與JavaScript文件一起保存在單獨的文件中，以便它可以更加模塊化。

我想有東西如下工作：

<script id="myTemplate" 
     type="text/x-jsrender" 
     src="template/myTemplate.html"> 
</script>

其中myTemplate.html定義了必要的HTML模板片段。我試過上面的代碼，但它不起作用。任何人都可以提出一種解決問題的替代方法嗎？

來源

2012-07-10 Jay Zhu

那麼，你試過嗎？寫這個問題可能花費更多的時間，而不是實際嘗試它。 – TheZ 2012-07-10 16:10:40

@TheZ：是的，我試過了，它不起作用。我張貼的問題，看看是否有人可以推薦一種替代方式:-)。我已經更新了這個問題來反映這一點。 – 2012-07-10 16:19:42

這是[將jsRender模板存儲在單獨的js文件中]的副本（http://stackoverflow.com/questions/10413894/store-a-jsrender-template-in-a-separate-js-file）。對不起，關於 – 2012-07-10 16:32:16

如果你不想使用AJAX調用，並且使用更多的內存不關心你，至少有一個我能想到的替代解決方案。 AJAX可能更乾淨，但我想我會把它放在那裏。

document.write('<script id="myTemplate" type="text/x-jsrender"><div>{{:name}} ({{:year}})</div></script>');

如果你將它放入一個外部文件，並通過

<script type="text/javascript" 
    src="template/myTemplate.js"> 
</script>

其鏈接腳本將字符串的一個有效的腳本標籤拷貝追加到DOM是jsrender實際上可以訪問。當然，這最終會在客戶端使用大約兩倍的內存，但是......如果它不是太大的文件，它應該不成問題。

來源

2012-07-10 17:03:11 TheZ

瀏覽器不會以他們不支持（內部）支持的語言下載腳本（基於type屬性）。

從src屬性獲取URI，然後用XHR請求資源。

來源

2012-07-10 17:07:24 Quentin

Untrue。如果您在OP中加載HTML時檢查Firebug和/或Chrome開發工具的Network選項卡，您將看到'template/myTemplate.html'的內容確實被瀏覽器請求並通過網絡傳輸。由於某些原因，它們根本無法用於jsRender。 – 2012-12-18 21:31:11

參考外部JavaScript模板

回答

相關問題