Question

我使用jsrender作为JavasScript模板引擎。用法很简单：

在HTML页面中，使用模板化HTML内容定义脚本标记：

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

在JavaScript中，定义一个变量，并对模板调用render函数：

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模板代码段。我尝试了上面的代码，但它不起作用。任何人都可以提出另一种解决问题的方法吗？

Answer 1

如果您不想使用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>

然后脚本会将字符串的有效脚本标记副本附加到jsrender实际可以访问的DOM。当然，这最终会使用大约两倍于客户端的内存，但是......如果文件不是太大，那应该不是问题。

Answer 2

浏览器不会以他们没有（内部）支持的语言（基于type属性）下载脚本。

从src属性获取URI，然后使用XHR请求资源。