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)
Copy the code as follows: <!DOCTYPE html>
<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>
<head>
<tr>
<th>Serial number</th>
<th>Name</th>
<th>Family Members</th>
</tr>
</head>
<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, 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",
"grandmother",
"uncle"
]
}];
// Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Nested loops to access parent data using parameters (recommended)
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nested loops use parameters to access parent data --- by Yang Yuan</title>
<style>
</style>
</head>
<body>
<div>
<table>
<head>
<tr>
<th>Serial number</th>
<th>Name</th>
<th>Family Members</th>
</tr>
</head>
<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>
{{!-- 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",
"grandmother",
"uncle"
]
}];
// Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Use else in custom tags (highly not recommended)
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use else in custom tags --- by Yang Yuan</title>
<style>
</style>
</head>
<body>
<div>
<table>
<head>
<tr>
<th>name</th>
<th>Unit Price</th>
</tr>
</head>
<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 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 tag
$.views.tags({
"isShow": function(price){
var temp=price+''.split('');
if(this.tagCtx.props.status === 0){
//Judge whether the price is the number of daffodils. If so, it will be displayed, otherwise it will not be displayed.
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 "";
}
}
});
// Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Use helper instead of custom tags (recommended)
The code copy is as follows:
<!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>
<head>
<tr>
<th>name</th>
<th>Unit Price</th>
</tr>
</head>
<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 for branch jump, 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
$.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;
}
}
});
// Rendering data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Click here to download the complete example code.
I hope this article will be helpful to everyone's JsRender programming learning.