Question

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

<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'。

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

2 个答案: