javascript - 引用外部 JavaScript 模板

Question

我使用jsrender作为 JavaScript 模板引擎。用法非常简单：

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

score 0 · Accepted Answer

如果您不想使用 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 中。当然，这最终会在客户端上使用大约两倍的内存，但是......如果文件不是太大，那应该不是问题。

score 0 · Accepted Answer

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

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

2 回答 2