Fork me on GitHub

jQuery.template.js 简单使用

之前看了一篇文章《我们为什么要尝试前后端分离》，深有同感，并有了下面的评论：

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 views，有时候还会在这些 view 中写一些 c# 代码，突然有一天前端页面的样式出错了，但前端那里并没有问题，然后后端把前端叫过来，说你在我这里调吧，因为你没有后端的调试环境，然后前端就会很不爽，然后。。。你懂的！
其实理想的情况，就像你说的那样，前端写好页面，关于动态数据都用 ajax 的方式进行加载，这些动态数据在前端那里先 mock 出来，但数据的格式要有一定的规范，前端弄好这些之后，后端不能去修改这些页面，而是给前端一些数据接口，前端直接把接口替换掉 mock 就行了，如果页面出了问题，前端直接修复就行了，各司其职的工作效率会非常高。
总的来说，就是前端和后端要有一定的规范和接口，彼此不干预对方的工作内容（比如后端在前端写好的页面里面写后端代码）。

今天偶然发现了一个 jQuery 插件，可以部分解决上面的问题，就是 jQuery.template.js，我们首先定义好 html 模版，然后使用这个插件在对应的模版中填充数据。

简单示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="jquery.js"></script>
    <script src="jquery.tmpl.js"></script>
</head>
<body>
    <div id="div_template1"></div><br />
    <ul id="div_template2">
    </ul>
    <script id="template1" type="text/x-jquery-tmpl">
        <a href="${Link}" target="_blank">${Text}</a>
    </script>
    <script id="template2" type="text/x-jquery-tmpl">
        <li>${ID}.<span>${Name}</span></li>
    </script>

    <script type="text/javascript">
        $(function () {
            var link = { Text: '蟋蟀', Link: 'http://www.cnblogs.com/xishuai/' };
            var users = [{ ID: '1', Name: 'xishuai1' }, { ID: '2', Name: 'xishuai2' }];

            $('#template1').tmpl(link).appendTo('#div_template1');
            $('#template2').tmpl(users).appendTo('#div_template2');
        });
    </script>
</body>
</html>

生成的 html 代码：

<div id="div_template1"><a href="http://www.cnblogs.com/xishuai/" target="_blank">蟋蟀</a></div><br>
<ul id="div_template2">
    <li>1.<span>xishuai1</span></li>
    <li>2.<span>xishuai2</span></li>
</ul>

会根据 json 数据的类型，进行单个显示还是循环显示，当然，也可以在 ajax 请求数据之后进行操作：

$.get("url", function (data) {
    $('#template1').tmpl(data).appendTo('#div_template1');
});

当然，jQuery.template.js 的功能不仅如此，具体参考：

posted @   田园里的蟋蟀  阅读(8527)  评论(2)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
历史上的今天：
2015-08-26 关于项目架构设计的一些规范
2014-08-26 Why is HttpContext.Current null after await?
点击右上角即可分享
微信分享提示
SQL AI 助手