Juicer模板引擎使用笔记
关于Juicer:Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。 除此之外,它还可以在 Node.js 环境中运行。Juicer中文文档地址:http://juicer.name/docs/docs_zh_cn.html
1.引入Juicer插件
<script type="text/javascript" src="juicer-min.js"></script>
2.初始化
$(function () { //初始化模板引擎 juicer.set({ 'tag::operationOpen': '{*' });
//注册自定义函数 juicer.register('dateForm', ChangeDateFormat); juicer.register('xk', showXkBtn); juicer.register('ry', showRyBtn); juicer.register('jzxj', showJzxjBtn); juicer.register('notNull', notNull); loadInfo(jtParm); });
3.Juicer有两个参数,tp1和data
tp1:定义好的模板页。比如,
<!-- juicer模板页--> <script id="tp1" type="text/ng-template"> {*each list as item,index}//index:可选参数,表示当前索引 <tr> <td>${item.Heq_Id}</td> <td>${item.Heq_Name|notNull}</td> <td>${item.Heq_LoginName}</td> <td>${item.Heq_LoginPwd}</td> <td>${item.Heq_Frdb}</td> <td>${item.Heq_Email}</td> <td>${item.Heq_Zch}</td> <td>${item.Heq_Tel}</td> <td>${item.Heq_Address}</td> <td>${item.Heq_Qq}</td> <td>${item.Heq_Notice}</td> <td> <a href="#"> <button class="btn btn-danger btn-xs" onclick="del('${item.Heq_Id}')">删除</button> </a> <a href="#"> <button class="btn btn-info btn-xs" onclick="edit('${item.Heq_Id}')">编辑</button> </td> </a> </tr> {*/each} </script>
data:需要传入模板页的数据。项目中是异步请求控制器方法得回一串json数据
loadData();
function loadData(){
$.post( "/Headquarter/GetAllUserInfo", //请求控制器方法得到Json数据 { }, function (data) { var userInfo = $('#tp1').html();// 获取模板页的内容 var html = juicer(userInfo, data);//使用模板引擎渲染json数据到模板userInfo,变量html接收 $('#showTp1').html(html);//输出 });
}
附部分html部分代码
<table class="table table-bordered table-hover"> <thead> <tr> <th>序号</th> <th>公司名称</th> <th>登录账号</th> <th>密码</th> <th>公司法人</th> <th>邮箱</th> <th>公司注册号</th> <th>联系电话</th> <th>公司地址</th> <th>公司QQ</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody id="showTp1"></tbody>//loadData的地方 </table>
效果图:
![]()
作者:丹麦的面包不单卖
出处: http://www.cnblogs.com/MySdm/
微信公众账号:丹麦的面包不单卖
扫一扫左侧的二维码(或者长按识别二维码),关注本人微信公共号,获取更多资源。(其实啥都没有,我只是单纯的占个位置)
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。