JsRender practical introduction tutorial
- 2020-03-30 04:12:09
- OfStack
This article is a practical introduction to JsRender tutorial, examples about the use of tag else, loop nested access to parent data, and so on. Share with you for your reference. The details are as follows:
preface
JsRender is a jquery-based JavaScript template engine, it has the following characteristics:
・ Simple and intuitive
・ powerful
・ extensible
・ Fast as lightning
These features look great, but almost every template engine advertises them that way...
As a result of the work needs, vegetables just contact this template engine. After using it for a while, I found that it was really strong, but kochi felt that it was too strong in some places, which made people feel difficult to understand.
On the other hand, JsRender's official documents are more detailed, but other data surprisingly little, encountered some problems, the basic search, not only is the relevant problem search, almost no results.
In addition, some parts of JsRender are really hard to understand, so it is urgent to share some "best practices".
Based on its recent use, xiaocai summarizes some practical lessons that, of course, are not found in official documents.
Nested loops using #parent to access parent data (not recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Nested loops #parent Accessing parent data --- by Yang yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="10%"> The serial number </th>
<th width="10%"> The name </th>
<th width="80%"> Members of the family </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}}
{{!-- using #parent Access to the parent index --}}
<b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b>
{{!-- using #parent Access the parent data, which is stored in data Properties of the --}}
{{!-- #data The equivalent of this --}}
{{:#parent.parent.data.name}} the {{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: " Zhang SAN ",
family: [
" dad ",
" mother ",
" The elder brother "
]
},{
name: " Li si ",
family: [
" grandpa ",
" grandma ",
" uncle "
]
}];
//Render data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>Nested loops access parent data using parameters (recommended)
<!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>
<thead>
<tr>
<th width="10%"> The serial number </th>
<th width="10%"> The name </th>
<th width="80%"> Members of the family </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 for When looping, you can add a parameter to the following, the parameter must be ~ At the beginning, multiple arguments are separated by Spaces --}}
{{!-- By accessing the parameters, we cache the parent data, and by accessing the parameters in the child loop, we can access the parent data indirectly --}}
{{for family ~parentIndex=#index ~parentName=name}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data The equivalent of this --}}
{{:~parentName}} the {{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: " Zhang SAN ",
family: [
" dad ",
" mother ",
" The elder brother "
]
},{
name: " Li si ",
family: [
" grandpa ",
" grandma ",
" uncle "
]
}];
//Render data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
Use else in custom tags (strongly not recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Used in custom tags else --- by Yang yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="50%"> The name of the </th>
<th width="50%"> The 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 For custom tags, price Is the parameter passed in, status It's 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: " pears ",
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){
//Determine whether the price is the number of daffodils, if so, then display, otherwise not shown
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 helpers instead of custom tags (recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> with helper Instead of custom tags --- by Yang yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width="50%"> The name of the </th>
<th width="50%"> The 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>
{{!-- Using native if Do branch jump, take advantage of helper Do logical processing --}}
{{if ~isShow(price)}}
{{:price}}
{{else}}
--
{{/if}}
</td>
</tr>
</script>
<script>
//Data source
var dataSrouce = [{
name: " apple ",
price: 108
},{
name: " pears ",
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>
Complete sample code click here (link: http://xiazai.jb51.net/201410/yuanma/JsRender_Demo (jb51.net). Rar).