This article mainly introduces the Jsrender practical Getting Started instance, contains the tag else use, loop nested access to the parent data and other knowledge points, and provides a complete instance download, very practical value, the need for friends can refer to the next
This article is a practical introductory tutorial on Jsrender, which describes the knowledge points that tag else uses, loops through nested access to the parent data, and so on. Share to everyone for your reference. Specific as follows:
Objective
Jsrender is a jquery-based JavaScript template engine with the following features:
· Simple and intuitive
· Powerful features
· The extensible
· Fast as lightning.
These features look great, but almost every template engine will be so advertised ...
This template engine is only accessible to side dishes due to work needs. The use of a period of time, found that it is indeed more powerful, but the side of the side of the side of the strong, but it is difficult to understand.
On the other hand, the official documents of the Jsrender more detailed, but other information surprisingly little, encountered some problems, the basic search, not only related issues are not searched, almost no results.
Plus Jsrender Some places are really bad to understand, so there is a need to share some "best practices".
Based on the use of the most recent period of time, side dishes summarize some practical experience, of course, these experiences are not found in official documents.
Nested loops use #parent to access parent data (not recommended)
Copy CodeThe code is as follows: <! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Nested loops use #parent to access parent data---by Yang Yuan </title>
<style>
</style>
<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 id= "List" >
</tbody>
</table>
</div>
<script src= "Jquery.min.js" ></script>
<script src= "Jsviews.js" ></script>
<!--define Jsrender templates--
<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 the parent data, the parent data is saved in the Database property--}}
{{!--#data相当于this--}}
{{: #parent. Parent.data.name}} {{: #data}}
{{/for}}
</td>
</tr>
</script>
<script>
Data source
var datasrouce = [{
Name: "Zhang San",
Family: [
"Papa",
"Mom",
Brother
]
},{
Name: "John Doe",
Family: [
"Grandpa",
"Granny",
Uncle
]
}];
Rendering data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
Nested loops use parameters to access parent data (recommended)
Copy CodeThe code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Nested loops use parameters to access parent data---by Yang Yuan </title>
<style>
</style>
<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 id= "List" >
</tbody>
</table>
</div>
<script src= "Jquery.min.js" ></script>
<script src= "Jsviews.js" ></script>
<!--define Jsrender templates--
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{: #index + 1}}</td>
<td>{{:name}}</td>
<td>
{{{!--use a For loop, you can add a parameter behind it, the parameter must start with a ~, and multiple parameters are separated by a space--}}
{{!--through parameters, we cache the parent's data, and we can access the parent data indirectly through the access parameters in the child loop--}}
{{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: "Zhang San",
Family: [
"Papa",
"Mom",
Brother
]
},{
Name: "John Doe",
Family: [
"Grandpa",
"Granny",
Uncle
]
}];
Rendering data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
Use else (strongly not recommended) in custom tag
Copy CodeThe code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> use Else---by Yang yuan </title> in custom tags
<style>
</style>
<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 templates--
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{:name}}</td>
<td>
{{!--isshow is 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 labels
$.views.tags ({
"Isshow": function (Price) {
var temp=price+ '. Split (');
if (this.tagCtx.props.status = = = 0) {
Determine if the price is Narcissus number, if yes, 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 "";
}
}
});
Rendering data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
Use helper instead of custom tags (recommended)
Copy CodeThe code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> helper instead of custom tags---by yang yuan </title>
<style>
</style>
<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 templates--
<script id= "Testtmpl" type= "Text/x-jsrender" >
<tr>
<td>{{:name}}</td>
<td>
{{!--use native if for branch jump, use helper for logic 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;
}
}
});
Rendering data
var html = $ ("#testTmpl"). Render (Datasrouce);
$ ("#list"). Append (HTML);
</script>
</body>
Full instance code click here to download this site.
Jsrender Practical Getting Started Tutorial
