从远程服务器加载 jquery 模板

发布于 2024-12-07 12:52:52 字数 484 浏览 0 评论 0原文

我在几个项目中使用 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 很陌生，所以我可能还遗漏了一些明显的东西！

有什么想法吗？

原文

I am using jquery templates on several projects. Thing is, in order to get a consistent feel, I was planning to put all the common templates on a CDN server, and then load them from different services with (in head):

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

Then (in page ready handler), I use the following code to render my template:

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

Thing is ... it doesn't work !? nothing is rendered ... I don't know if it is even possible. I am very new to jquery-template, so I might also be missing something obvious !!!

Any idea ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烛影斜 2024-12-14 12:52:52

你的模板是什么样的？浏览器将其处理为 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 变量。

How does your template look like? Is browser processing it as html or as javascript? Try putting it in .js file or loading your templates as a string variables in javascript file. Instead of

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

load some .js file which has something like this:

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

You can have one or more js files with templates, but should have javascript as a source, not html.

UPDATE after I tried your scenario:
When loaded the way how you tried, contents of error-page.html are not parsed as jquery template and you get empty errorPage variable.

回复收藏 0 原文

攀登最高峰 2024-12-14 12:52:52

您可以在外部文件中创建模板并使用 $.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 请求访问文件，因此您必须抛出将其插入本地网络服务器进行尝试。

编辑：
显然，您还可以强制仅使用 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”。

You can create the templates in external files and call them with $.getScript.

For instance:

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>');

The only problem with testing this is that browsers don't usually allow file access for AJAX requests, so you'll have to throw it into a local web server to try it out.

edit:
You can apparently also force html-only requests:

$.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>

Notice how after the callback in $.get, I'm explicitly specifying 'html'.

回复收藏 0 原文

~没有更多了~

关于作者

瀟灑尐姊

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

从远程服务器加载 jquery 模板

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

从远程服务器加载 jquery 模板

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。