关于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>

效果图:

Juicer模板引擎使用笔记的更多相关文章

  1. NVelocity模板引擎学习笔记

    NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结

  2. Volecity模板引擎学习笔记

    转自:https://blog.csdn.net/reggergdsg/article/details/50937433 最近项目中用到了volecity模板,这里做一下笔记,学习中...相比较 Fr ...

  3. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  4. juicer模板引擎使用

    http://www.juicer.name/ <script src="~/Scripts/jquery-1.8.2.min.js"></script> ...

  5. beetl模板引擎使用笔记

    maven项目pom: <dependency> <groupId>com.ibeetl</groupId> <artifactId>beetl< ...

  6. Juicer javascript 模板引擎

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...

  7. js模板引擎之juicer,特别好用

    中文文档地址 https://www.npmjs.com/package/juicer Juicer基础知识:语法2  http://blog.163.com/lvshutao@126/blog/st ...

  8. Juicer 轻量级javascript模板引擎

    juicer是一个javascript轻量级模板引擎. 使用方法 编译模板并根据数据立即渲染出结果 1 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 1 va ...

  9. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

随机推荐

  1. Linux下实现视频读取(三)---Buffer的准备和数据读取

    前面主要介绍的是:V4L2 的一些设置接口,如亮度,饱和度.曝光时间,帧数,增益.白平衡等.今天看看V4L2 得到数据的几个关键ioctl,Buffer的申请和数据的抓取. 1. 初始化 Memory ...

  2. poj 2570 Fiber Network(floyd)

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; int ...

  3. EventBus在Android中的简单使用

    EventBus是一个方便与Android中各组件通信的开源框架,开源地址;https://github.com/greenrobot/EventBus.EventBus功能非常强大 ,今天在做一个功 ...

  4. Unity 3D游戏开发引擎:最火的插件推荐

    摘要:为了帮助使用Unity引擎的开发人员制作更完美的游戏.我们精心挑选了十款相关开发插件和工具.它们是:2D Toolkit.NGUI.Playmaker.EasyTouch & EasyJ ...

  5. 第03章-VTK系统概述(1)

    [译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...

  6. POJ2942 Knights of the Round Table 点双连通分量,逆图,奇圈

    题目链接: poj2942 题意: 有n个人,能够开多场圆桌会议 这n个人中,有m对人有仇视的关系,相互仇视的两人坐在相邻的位置 且每场圆桌会议的人数仅仅能为奇书 问有多少人不能參加 解题思路: 首先 ...

  7. 导出Excel1 - 项目分解篇

    我们在全部的MIS系统(信息管理系统)中都能见到他.所以我们把这个通用功能提出来. 项目名称:车辆信息管理系统(中石化石炼) 项目负责人:xiaobin 项目时间:2006.12 - 2007.2 E ...

  8. 泛泰A870(高通APQ8064t 600 cpu) Mokee4.4.2(Android4.4) 图赏

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3lob3N0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  9. 【功能代码】---3 JS判断字符串是否包含某个字符串

    JS判断字符串是否包含某个字符串 var str ="abc"; if(str.indexOf("bc")>-1){ alert('str中包含bc字符串 ...

  10. iOS Label 自适应高度

    推荐第二个 测试一,只改变numberOfLines属性,label的高度不会自适应(会有text中的一部分内容称为......) NSString *str = @"jgreijgirje ...