JSRender模板一
JSRender以內置的模板標籤
（一） JsRender模板，被稱爲"下一代jQuery模板"，爲高性能的、純粹基於字符串的呈現作了優化，而且不依賴於DOM或jQuery。在JsRender中，是經過調用方法render()來渲染模板的，換句話說，就是在Html文件中使用java script來輸出html模板的內容。javascript
1、什麼是JsRender？html
JsRender是一個簡單、直觀，強大、易擴展、輕量的最優UI模板。java
換句話說，就是在Html文件中使用java script來輸出html模板的內容。jquery
2、附件是最新的jsrender.js和jsrender.min.js（2013/07/27），若是想下載最新的jsrender.js和jsrender.min.js,能夠去官方文檔下載：http://www.jsviews.com/#download數組
2、玩轉JsRenderjsp
內置的模板標籤（Built-in template tags）
性能
1. {{: ...}}：用於輸出"..."部分指定的數據，「...」部分是數據來源的路徑或者是一個數據表達式，例如：{{:address.street}}測試
例子：優化
html代碼ui
<%@ 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 ...}}遍歷數組和對象，他會自動遍歷第一層的內容。能夠看前面一、{{：}}，輸出數據的介紹。
{{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等等。
相關文章
- 1. JS-jsrender模板
- 2. 下一代Jquery模板-----JsRender
- 3. 模板引擎jsrender的簡單入門
- 4. 【JS】JsRender模板插件的使用
- 5. 前端模板引擎(jQuery模板)jsrender的基本教程
- 6. JavaScript中的模板(jsRender)在Django中的使用
- 7. javascript模板庫jsrender for循環嵌套示例
- 8. jquery-jsrender使用
- 9. jsRender的使用
- 10. JSRender 遍歷對象
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • 委託模式
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
