This article is a practical introductory tutorial for JsRender. Examples describe the use of tag else, nested loops to access parent data and other knowledge points. Share it with everyone for your reference. The details are as follows:
Foreword
JsRender is a JavaScript template engine based on jQuery. It has the following features:
· Simple and intuitive
· Powerful function
· Extensible
· Fast as lightning
These features seem very powerful, but almost every template engine will promote them 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 relatively powerful, but Xiaocai feels that some parts are too powerful, which makes it difficult to understand.
On the other hand, the official documentation of JsRender is relatively detailed, but there is surprisingly little other information. If you encounter any problems, you basically can’t find them. Not only can’t you find relevant issues, but there are almost no results.
In addition, some parts of JsRender are really difficult to understand, so Xiaocai urgently needs to share some "best practices".
Based on recent use, Xiaocai has summarized some practical experiences. Of course, these experiences cannot be found in official documents.
Nested loops use #parent to access parent data (not recommended)
嵌套循环使用#parent访问父级数据 --- by 杨元
<script><br>
//数据源<br>
var dataSrouce = [{<br>
name: "张三",<br>
family: [<br>
"爸爸",<br>
"妈妈",<br>
"哥哥"<br>
]<br>
},{<br>
name: "李四",<br>
family: [<br>
"爷爷",<br>
"奶奶",<br>
"叔叔"<br>
]<br>
}];<br>
<br>
//渲染数据<br>
var html = $("#testTmpl").render(dataSrouce);<br>
$("#list").append(html);<br>
<br>
</script>
Nested loops use parameters to access parent data (recommended)
Nested loops use parameters to access parent data --- by Yang Yuan
<script><br>
//Data source<br>
var dataSrouce = [{<br>
name: "张三",<br>
family: [<br>
"Dad",<br>
"Mom",<br>
"Brother"<br>
]<br>
},{<br>
name: "李思",<br>
family: [<br>
"Grandpa",<br>
"Grandma",<br>
"Uncle"<br>
]<br>
}];<br>
<br>
//Rendering data<br>
var html = $("#testTmpl").render(dataSrouce);<br>
$("#list").append(html);<br>
<br>
</script>
Use else in custom tag (strongly not recommended)
自定义标签中使用else --- by 杨元
<script><br>
//Data source<br>
var dataSrouce = [{<br>
name: "Apple",<br>
Price: 108<br>
},{<br>
name: "Yali",<br>
Price: 370<br>
},{<br>
.
Price: 99<br>
},{<br>
name: "Pineapple",<br>
Price: 371<br>
},{<br>
name: "orange",<br>
Price: 153<br>
}];<br>
<br>
//Custom tag<br>
$.views.tags({<br>
"isShow": function(price){<br>
var temp=price ''.split('');<br>
If(this.tagCtx.props.status === 0){<br>
// Determine whether the price is the number of daffodils, if so, display it, otherwise do not display it <br>
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){<br>
return this.tagCtxs[0].render();<br>
}else{<br>
return this.tagCtxs[1].render();<br>
}<br>
}else{<br>
return "";<br>
}<br>
}<br>
});<br>
<br>
<br> //Rendering data<br>
var html = $("#testTmpl").render(dataSrouce);<br>
$("#list").append(html);<br>
</script>
Use helper instead of custom tags (recommended)
Copy code
The code is as follows:
用helper代替自定义标签 --- by 杨元
<script><br>
//Data source<br>
var dataSrouce = [{<br>
name: "Apple",<br>
Price: 108<br>
},{<br>
name: "Yali",<br>
Price: 370<br>
},{<br>
.
Price: 99<br>
},{<br>
name: "Pineapple",<br>
Price: 371<br>
},{<br>
name: "orange",<br>
Price: 153<br>
}];<br>
<br>
//Helper<br>
$.views.helpers({<br>
"isShow": function(price){<br>
var temp=price ''.split('');<br>
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){<br>
return true;<br>
}else{<br>
return false;<br>
}<br>
}<br>
});<br>
<br> //Rendering data<br>
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);<p>
<br>
</script>
Click here for the complete example code
Download from this site.
I hope this article will be helpful to everyone’s learning of JsRender programming.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
