从远程服务器加载的 jquery 模板

Question

我在几个项目中使用 jquery 模板。问题是，为了获得一致的感觉，我打算将所有常用模板放在 CDN 服务器上，然后从不同的服务加载它们（在 head 中）：

<script id="errorPage" src="http://www.mycdn.com/error-page.html" type="text/x-jquery-tmpl"></script>

然后（在页面就绪处理程序中），我使用以下代码来呈现我的模板：

$("#errorPage").tmpl("errorPage", {'message': 'Permission denied'}).prependTo("body");

事情是......它不起作用！？什么都没有渲染......我不知道它是否可能。我对 jquery-template 很陌生，所以我可能还遗漏了一些明显的东西！！！

有什么想法吗？

Answer 1

您的模板看起来如何？浏览器将其处理为 html 还是 javascript？尝试将其放入 .js 文件或将模板作为字符串变量加载到 javascript 文件中。而不是

<script id="errorPage" src="http://www.mycdn.com/error-page.html" type="text/x-jquery-tmpl"></script>

加载一些类似这样的 .js 文件：

var errorPage = "<html><body>error: ${message}</body></html>"; //replace with your template
...
$.template( "errorPage", errorPage);

您可以拥有一个或多个带有模板的 js 文件，但应该将 javascript 作为源，而不是 html。

在我尝试了您的方案后更新： 当按照您尝试的方式加载时，error-page.html 的内容不会被解析为 jquery 模板，您会得到空的 errorPage 变量。

Answer 2

您可以在外部文件中创建模板并使用$.getScript 调用它们。

例如：

example.html

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> 
<script>
$(function() {
    $.getScript('./template.js', function(data) { 
        $.tmpl("message", { id:1, msg:"Some Message!" } ).appendTo('#output');
    });
});
</script>
<body>
<div id="output"></div>
</body>

template.js

$.template("message", '<a href="/message/${id}">${msg}</a>');

对此进行测试的唯一问题是浏览器通常不允许对 AJAX 请求进行文件访问，因此您必须将其放入本地 Web 服务器进行尝试。

编辑： 您显然也可以强制仅 html 请求：

$.get('./template2.js', function(data) { 
    $.template("message2", data);
    $.tmpl( "message2", { id:1, msg:"Some Message!" } ).appendTo('#output');
}, 'html');

template2.js

<p id="script2">
    <a href="/message/${id}">${msg}</a>
</p>

注意在$.get 中的回调之后，我明确指定了“html”。