This article is a practical introductory tutorial for JsRender, which examples describe knowledge points such as using tag else and loop nested access to parent data. Share it for your reference. The details are as follows:
Preface
JsRender is a JavaScript template engine based on jQuery. It has the following features:
· Simple and intuitive
Powerful
· Extensible
· As fast as lightning
These features look amazing, but almost every template engine will be advertised like this. . .
Due to work needs, Xiaocai came into contact with this template engine. After using it for a while, I found that it is indeed quite powerful, but Xiaocai feels that some places are too powerful, which makes people find it difficult to understand.
On the other hand, JsRender's official documents are relatively detailed, but there are surprisingly few other information. If you encounter any problems, you can basically not search. Not only can you find related problems, but there is almost no result.
In addition, some parts of JsRender are indeed difficult to understand, so I urgently need some "best practices" to share.
Based on recent use, Xiaocai has summarized some practical experiences, and of course, these experiences cannot be found in the official documentation.
Nested loop to access parent data using #parent (not recommended)
<html>
<head>
<meta charset="utf-8">
<title>Nested loop using #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 members</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<script src=""></script>
<script src=""></script>
<!-- Define JsRender template -->
<script type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{for family}}
{{!-- Use #parent to access parent index --}}
<b>{{:# + 1}}.{{:#index + 1}}</b>
{{!-- Use #parent to access the parent data, and the parent data is saved in the data attribute --}}
{{!-- #data is equivalent to this --}}
{{:#data}} of {{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: "Zhang San",
family: [
"dad",
"Mother",
"elder brother"
]
},{
name: "Li Si",
family: [
"grandfather",
"Grandma",
"uncle"
]
}];
//Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Nested loops to access parent data using parameters (recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nested loops to access parent data using parameters --- 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 members</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<script src=""></script>
<script src=""></script>
<!-- Define JsRender template -->
<script type="text/x-jsrender">
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{!-- When using a for loop, you can add parameters afterwards. The parameters must start with ~, and multiple parameters are separated by spaces --}}
{{!-- Through parameters, we cache the parent data. By accessing the parameters in the child loop, we can indirectly access the parent data --}}
{{for family ~parentIndex=#index ~parentName=name}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data is equivalent to this --}}
{{:#data}} of {{:~parentName}}
{{/for}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: "Zhang San",
family: [
"dad",
"Mother",
"elder brother"
]
},{
name: "Li Si",
family: [
"grandfather",
"Grandma",
"uncle"
]
}];
//Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Use else in custom tags (highly not recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use else in custom tags --- 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 >
</tbody>
</table>
</div>
<script src=""></script>
<script src=""></script>
<!-- Define JsRender template -->
<script type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!-- isShow is a custom tag, price is the passed parameter, status is an additional property --}}
{{isShow price status=0}}
{{:price}}
{{else price status=1}}
--
{{/isShow}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: "Apple",
price: 108
},{
name: "Da Li",
price: 370
},{
name: "peach",
price: 99
},{
name: "Pineapple",
price: 371
},{
name: "Orange",
price: 153
}];
//Custom tags
$.({
"isShow": function(price){
var temp=price+''.split('');
if( === 0){
//Judge whether the price is the number of daffodils. If so, it will be displayed, otherwise it will not be displayed.
if(price==((parseInt(temp[0],10),3)+(parseInt(temp[1],10),3)+(parseInt(temp[2],10),3))){
return [0].render();
}else{
return [1].render();
}
}else{
return "";
}
}
});
//Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Use helper instead of custom tags (recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use helper instead of custom tags --- 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 >
</tbody>
</table>
</div>
<script src=""></script>
<script src=""></script>
<!-- Define JsRender template -->
<script type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!-- Use native if for branch jumps, use helper for logical processing --}}
{{if ~isShow(price)}}
{{:price}}
{{else}}
--
{{/if}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: "Apple",
price: 108
},{
name: "Da Li",
price: 370
},{
name: "peach",
price: 99
},{
name: "Pineapple",
price: 371
},{
name: "Orange",
price: 153
}];
//Helper
$.({
"isShow": function(price){
var temp=price+''.split('');
if(price==((parseInt(temp[0],10),3)+(parseInt(temp[1],10),3)+(parseInt(temp[2],10),3))){
return true;
}else{
return false;
}
}
});
//Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Click here for the full example codeDownload this site。
I hope this article will be helpful to everyone's JsRender programming learning.