标签：
（一） JsRender模板，被称为"下一代jQuery模板"，为高性能的、纯粹基于字符串的呈现做了优化，并且不依赖于DOM或jQuery。在JsRender中，是通过调用方法render()来渲染模板的，换句话说，就是在Html文件中使用java script来输出html模板的内容。
一、什么是JsRender？
JsRender是一个简单、直观，强大、易扩展、轻量的最优UI模板。
换句话说，就是在Html文件中使用java script来输出html模板的内容。
二、附件是最新的jsrender.js和jsrender.min.js（2013/07/27），如果想下载最新的jsrender.js和jsrender.min.js,可以去官方文档下载：http://www.jsviews.com/#download
二、玩转JsRender
内置的模板标签（Built-in template tags）
1. {{: ...}}：用于输出"..."部分指定的数据，“...”部分是数据来源的路径或者是一个数据表达式，例如：{{:address.street}}
例子：
html代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<%@ include file="/global/commonPage/includeHead/head.jsp" %>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jsrender.js"></script>
</head>
<body>
<div class="g-panel-body" style="height: 200px; overflow-y: auto">
<table align="center" cellpadding="2" cellspacing="2" class="table" style="color: #8c3901" >
<thead class="g-grid-hd">
<tr>
<td class="tdTitle" style="text-align: center" >姓名</td>
<td class="tdTitle" style="text-align: center">性别</td>
<td class="tdTitle" style="text-align: center">薪资</td>
<td class="tdTitle" style="text-align: center">电话</td>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<div class="g-panel-body" style="height: 100px; overflow-y: auto">
<table align="center" cellpadding="1" cellspacing="1" class="table" style="color: #000033" >
<thead class="g-grid-hd">
<tr>
<td class="tdTitle" style="text-align: center; width:2%" >姓名</td>
</tr>
</thead>
<tbody id="result2">
</tbody>
</table>
</div>
<%--定义jsrender模板--%>
<script id="theTmpl" type="text/x-jsrender">
<tr>
<td class="tdEdit" style="text-align: center;">{{:name}}</td>
</tr>
</script>
<script>
//数据源
var data1 = {
"name": "王五",
"sex":"男",
"phone":"13623654567",
"pay":"15000"
}
var data2 = [
{
"name": "张三",
"sex":"男",
"phone":"13623654567",
"pay":"12000"
},
{
"name": "李四",
"sex":"女",
"phone":"13789378456",
"pay":"8000"
}
];
//渲染数据
var htmlOutput = $("#theTmpl").render(data1);
$("#result2").html(htmlOutput);
var template = $.templates("#theTmpl2");
var htmlOutput2 = template.render(data2);
$("#result").html(htmlOutput2);
$.templates("templ","#theTmpl");
$("#result2").html($.render.templ(data1));
</script>
</body>
</html> 其中：在jsRender中，#xxx 表示当前view的 xxx 属性， - 所以 #index 就是view.index
{{：#index}}
在JsRender中，是通过调用方法render()来渲染模板的。JsRender中，有三种方式调用render()方法来渲染模板。这其中用了两种，还一种方法是通过名字注册的template，如：
$.templates("templ","#theTmpl");
$("#result2").html($.render.templ(data1));运行结果如下
2. {{>...}} 用于输出encoded的html。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<%@ include file="/global/commonPage/includeHead/head.jsp" %>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jsrender.js"></script>
</head>
<body>
<div class="g-panel-body" style="height: 200px; overflow-y: auto">
<table align="center" cellpadding="2" cellspacing="2" class="table" style="color: #8c3901" >
<thead class="g-grid-hd">
<tr>
<td class="tdTitle" style="text-align: center" >姓名</td>
<td class="tdTitle" style="text-align: center">性别</td>
<td class="tdTitle" style="text-align: center">薪资</td>
<td class="tdTitle" style="text-align: center">电话</td>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<%--定义jsrender模板--%>
<script id="theTmpl" type="text/x-jsrender">
<tr>
<td class="tdEdit" style="text-align: center;">{{:name}}</td>
<td class="tdEdit" style="text-align: center;">{{>name}}</td>
</tr>
</script>
<script>
//数据源
var data1 ={"name":"<b>王五</b>"}
//渲染数据
var htmlOutput = $("#theTmpl").render(data1);
$("#result").html(htmlOutput);
</script>
</body>
</html>运行结果：
3. {{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<%@ include file="/global/commonPage/includeHead/head.jsp" %>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jsrender.js"></script>
</head>
<body>
<div class="g-panel-body" style="height: 200px; overflow-y: auto">
<table align="center" cellpadding="2" cellspacing="2" class="table" style="color: #8c3901" >
<thead class="g-grid-hd">
<tr>
<td class="tdTitle" style="text-align: center" >姓名</td>
<td class="tdTitle" style="text-align: center">性别</td>
<td class="tdTitle" style="text-align: center">薪资</td>
<td class="tdTitle" style="text-align: center">电话</td>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<%--定义jsrender模板--%>
<script id="theTmpl" type="text/x-jsrender">
<td class="tdEdit" style="text-align: center;">{{:anmont.pay}}</td>
</script>
<script id="theTmpl2" type="text/x-jsrender">
<tr>
<td class="tdEdit" style="text-align: center;">{{:#index}}:{{:name}}</td>
<td class="tdEdit" style="text-align: center;">{{:sex}}</td>
{{include tmpl="#theTmpl"/}}
<td class="tdEdit" style="text-align: center;">{{:phone}}</td>
</tr>
</script>
<script>
//数据源
var data2 = [
{
"name": "张三",
"sex":"男",
"phone":"13623654567",
"anmont":{"pay":"12000"}
},
{
"name": "李四",
"sex":"女",
"phone":"13789378456",
"anmont":{"pay":"8000"}
}
];
//渲染数据
var template = $.templates("#theTmpl2");
var htmlOutput2 = template.render(data2);
$("#result").html(htmlOutput2);
</script>
</body>
</html>运行结果
4. {{for ...}}遍历数组和对象，他会自动遍历第一层的内容。可以看前面1、{{：}}，输出数据的介绍。
{{for··}}遍历多层数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<%@ include file="/global/commonPage/includeHead/head.jsp" %>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jsrender.js"></script>
</head>
<body>
<div class="g-panel-body" style="height: 200px; overflow-y: auto">
<table align="center" cellpadding="2" cellspacing="2" class="table" style="color: #8c3901" >
<thead class="g-grid-hd">
<tr>
<td class="tdTitle" style="text-align: center">门店名称</td>
<td class="tdTitle" style="text-align: center">门店地址</td>
<td class="tdTitle" style="text-align: center">订单人姓名</td>
<td class="tdTitle" style="text-align: center">订单人电话</td>
<td class="tdTitle" style="text-align: center">产品价格</td>
<td class="tdTitle" style="text-align: center">产品数量</td>
<td class="tdTitle" style="text-align: center">支付金额</td>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<%--定义jsrender模板--%>
<script id="theTmpl" type="text/x-jsrender">
<td class="tdEdit" style="text-align: center;">{{:anmont.pay}}</td>
</script>
<script id="theTmpl2" type="text/x-jsrender">
<tr>
<td class="tdEdit" style="text-align: center;">{{:storeName}}</td>
<td class="tdEdit" style="text-align: center;">{{:storeAdress}}</td>
{{for cont}}
<td class="tdEdit" style="text-align: center;">{{:productName}}</td>
<td class="tdEdit" style="text-align: center;">{{:productPhone}}</td>
{{for orderDaties}}
<td class="tdEdit" style="text-align: center;">{{:amont}}</td>
<td class="tdEdit" style="text-align: center;">{{:productNum}}</td>
<td class="tdEdit" style="text-align: center;">{{:productPrice}}</td>
{{/for}}
{{/for}}
</tr>
</script>
<script>
//数据源
var store={"storeName":"星巴克","storeAdress":"上海市山西南路"};
store.storeName="星巴克";
store.storeAdress="上海市山西南路";
var cont=[];
var contInformation={"productName":"李浩","productPhone":"13512345435","orderDaties":{"productPrice":"20","productNum":"2","amont":"80"}};
cont.push(contInformation);
store.cont=cont;
//渲染数据
$("#result").html($("#theTmpl2").render(store));
</script>
</body>
</html>运行结果
5. 条件表达式{{if··}}，用于渲染数据表达式为true时的模板. 一般用于如下几种情况：
1) {{if pathOrExpr}}...{{/if}} 用于渲染满足条件的内容。
2) {{if pathOrExpr tmpl=nameOrExpr /}}用于渲染外部包含的模板。
3) {{if ...}}...{{else}}...{{/if}}
{{if pathOrExpr}...{{else}}...{{/if}}
{{if pathOrExpr1 tmpl=nameOrExpr1 }}{{else tmpl=nameOrExpr2 }}{{/if}}
4) {{if ....}}...{{else ...}}...{{else}}...{{/if}}
{{if pathOrExpr1}}...{{else pathOrExpr2}}...{{else}}...{{/if}
列：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<%@ include file="/global/commonPage/includeHead/head.jsp" %>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=baseUrl%>/global/scripts/jsrender.js"></script>
</head>
<body>
<div class="g-panel-body" style="height: 200px; overflow-y: auto">
<table align="center" cellpadding="2" cellspacing="2" class="table" style="color: #8c3901" >
<thead class="g-grid-hd">
<tr>
<td class="tdTitle" style="text-align: center; width:20%" >姓名</td>
<td class="tdTitle" style="text-align: center; width:10%">性别</td>
<td class="tdTitle" style="text-align: center; width:10%">薪资</td>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<%--定义jsrender模板--%>
<script id="theTmpl2" type="text/x-jsrender">
{{if pay > 10000}}
<tr class="g-grid-tr" style="background: red;">
{{else}}
<tr class="g-grid-tr" style="background: green;">
{{/if}}
<td class="tdEdit" style="text-align: center;">{{:#getIndex()}}:{{:name}}</td>
<td class="tdEdit" style="text-align: center;">{{:sex}}</td>
<td class="tdEdit" style="text-align: center;">{{>pay}}</td>
</tr>
</script>
<script>
//数据源
var data=[{"name":"张山","sex":"男","pay":"12000"},{"name":"李四","sex":"女","pay":"8000"},{"name":"王五","sex":"男","pay":"15000"}];
//渲染数据
$("#result").html($("#theTmpl2").render(data));
</script>
</body>
</html>运行结果：
还有一些其他的条件表达式：
| 表达式 | 举例 | 注释 |
| || | {{ :a || b }} | 或 |
| && | {{ :a && b }} | 且 |
| ! | {{ :!a }} | 非 |
| <= 和>=和 <和 > | {{ :a <= b }} | 比较 |
| === 和 !== | {{ :a === b }} | 等于和不等于 |
6. jsrender定义模板中样式，也可以使用html结构定义标签，例如：style：height，width。color等等。
标签：
原文地址：http://my.oschina.net/u/2415525/blog/490027
