Objective
Jsrender is a jquery-based JavaScript template engine that has the following features:
· Simple and intuitive
· Strong function
· of an extensible
· As fast as Lightning
These features look great, but almost every template engine will advertise this ...
As a result of the work needs, the side dishes to contact the template engine. Used for some time, found that it is really strong, but the side dishes feel that some places strong too far, but it is difficult to understand.
On the other hand, Jsrender's official documents are more detailed, but the other information is surprisingly small, encountered some problems, basic search, not only related problems are not found, almost is no result.
Plus Jsrender Some places are really hard to understand, so it's urgent to share some "best practices" with side dishes.
Based on the use of recent time, the side dishes summarize some practical experience, of course, these experiences are not found in official documents.
Note: This article is not a basic introductory tutorial, the following example, with a note, do not do too much explanation, the reader's own experience, do not understand where to leave a message.
Nested loops use #parent to access parent data (not recommended)
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= "Utf-8" >
<title> Nested loops use #parent to access parent data---by Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width= "10%" > Serial number </th>
<th width= "10%" > Name </th>
<th width= "80%" > family member </th>
</tr>
</thead>
<tbody id= "List" >
</tbody>
</table>
</div>
<script src= "Jquery.min.js" ></script>
<script src= "Jsviews.js" ></script>
<!--define Jsrender template-->
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{: #index + 1}}</td>
<td>{{:name}}</td>
<td>
{{for Family}}}
{{{!--use #parent to access parent index--}}
<b>{{: #parent. Parent.index + 1}}. {{: #index + 1}}</b>
{{{!--use #parent to access parent data, the parent data is saved in the Data property--}}
{{!--#data相当于this--}}
{{: #data}}
{{: #parent. Parent.data.name}}
{{/for}}}
</td>
</tr>
</script>
<script>
//Data source
var datasrouce = [{
Name: "John",
family: [
"Papa",
.
"Mother,"
.
"Brother"
]
},{
name: "Dick",
family: [
"Grandpa",
"Granny",
"Uncle"
]
}];
//Render data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
</html>
Nested loops use parameters to access parent data (recommended)
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= "Utf-8" >
<title> Nested Loops use parameters to access the parent data---by Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width= "10%" > Serial number </th>
<th width= "10%" > Name </th>
<th width= "80%" > family member </th>
</tr>
</thead>
<tbody id= "List" >
</tbody>
</table>
</div>
<script src= "Jquery.min.js" ></script>
<script src= "Jsviews.js" ></script>
<!--define Jsrender template-->
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{: #index + 1}}</td>
<td>{{:name}}</td>
<td>
{{{!--use a For loop, you can add parameters at the back, arguments must start with a ~, and multiple arguments are separated by spaces--}
{{{!--pass parameters, we cache the parent data, in the child loop through the access parameters, you can indirectly access the parent data--}}
{{for Family ~parentindex= #index ~parentname=name}}
<b>{{:~parentindex + 1}}. {{: #index + 1}}</b>
{{!--#data相当于this--}}
{{: #data}} {
{: ~parentname}}}
{{/for}}}
</td>
</tr>
</script>
<script>
//Data source
var datasrouce = [{
Name: "John",
family: [
"Papa",
.
"Mom",
.
"Brother"
]
},{
name: "Dick",
family: [
"Grandpa",
"Granny",
"Uncle"
]
}];
//Render data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
</html>
Use else (strongly not recommended) in custom tags (named custom tag)
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= "Utf-8" >
<title> Custom Tags use else---by Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width= "50%" > Name </th>
<th width= "50%" > Unit price </th>
</tr>
</thead>
<tbody id= "List" >
</tbody>
</table>
</div>
<script src= "Jquery.min.js" ></script>
<script src= "Jsviews.js" ></script>
<!--define Jsrender template-->
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{:name}}</td>
<td>
{{{!--isshow as a custom label, price is an incoming parameter, status is an attached property--}}
{isshow price status=0}}
{{:p rice}}
{else price Status=1}}
--
{{/isshow}}}
</td>
</tr>
</script>
<script>
//Data source
var datasrouce = [{
name: "Apple",
price:108
},{
Name: "Pear",
price:370
},{
name: "Peach",
price:99
},{
Name: "Pineapple",
price:371
},{
Name: "Orange",
price:153
}];
//Custom Label
$.views.tags ({
' Isshow ': function (price) {
var temp=price+ '. Split (');
if (This.tagCtx.props.status = = 0) {
//Determine whether the price is Narcissus number, if it is, then show, otherwise do not show
if (price== Math.pow (parseint (temp[0],10), 3) +math.pow (parseint (temp[1],10), 3) +math.pow (parseint (temp[2), 10), 3)) {
return This.tagctxs[0].render ();
}else{
return This.tagctxs[1].render ();
}
}else{
return "";
}
}
});
//Render data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
</html>
Use helper instead of custom label (recommended)
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= "Utf-8" >
<title> Use helper instead of custom label---by Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width= "50%" > Name </th>
<th width= "50%" > Unit price </th>
</tr>
</thead>
<tbody id= "List" >
</tbody>
</table>
</div>
<script src= "Jquery.min.js" ></script>
<script src= "Jsviews.js" ></script>
<!--define Jsrender template-->
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{:name}}</td>
<td>
{{!--use native if to do branch jump, use helper to do logical processing--}
{{if ~isshow (price)}}
{{:p rice}}
{{Else}}}
--
{{/if}}}
</td>
</tr>
</script>
<script>
Data source
var datasrouce = [{
name: "Apple",
price:108
},{
Name: "Pear",
price:370
},{
name: "Peach",
price:99
},{
Name: "Pineapple",
price:371
},{
Name: "Orange",
price:153
}];
//helper
$.views.helpers ({
"Isshow": function (price) {
var temp=price+ '. Split (');
if (price== Math.pow (parseint (temp[0],10), 3) +math.pow (parseint (temp[1],10), 3) +math.pow (parseint (temp[2],10 ), 3)) {
return true;
}else{
return false;
}
}
});
//Render data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
</html>
Demo Code package Download: Http://xiazai.jb51.net/201412/yuanma/JsRender_Demo (jb51.net). rar
