jQuery.template.js 简单使用

最新推荐文章于 2018-06-12 16:14:26 发布

weixin_33862188

最新推荐文章于 2018-06-12 16:14:26 发布

阅读量132

点赞数

文章标签：前端后端 json ViewUI

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

我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 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 的功能不仅如此，具体参考：

weixin_33862188

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.template.js 简单使用

之前看了一篇文章《我们为什么要尝试前后端分离》，深有同感，并有了下面的评论：我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 views，有时候还会在这些 view 中写一些 c# 代码，突然有一天前端页面的样式出错了，但前端那里并没有问题，然后后端把前端叫过来，说你在我这里调吧，因为你没有后端的调试环境，然后前端就会很不爽，然后。。。你懂的！...
复制链接

扫一扫