本文是一篇JsRender的实用入门教程，实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。具体如下：
前言
JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：
· 简单直观
· 功能强大
· 可扩展的
· 快如闪电
这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。
由于工作需要，小菜才接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但小菜觉得有些地方强大的过头了，反倒让人觉得很难理解。
另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。
再加上JsRender有些地方确实是不好理解，所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用，小菜总结了一些实用经验，当然，这些经验在官方文档上是找不到的。
嵌套循环使用#parent访问父级数据（不推荐）
嵌套循环使用#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>
嵌套循环使用参数访问父级数据（推荐）
嵌套循环使用参数访问父级数据 --- 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>
自定义标签(custom tag)中使用else（强烈不推荐）
自定义标签中使用else --- by 杨元
<script><br />
//数据源<br />
var dataSrouce = [{<br />
name: "苹果",<br />
price: 108<br />
},{<br />
name: "鸭梨",<br />
price: 370<br />
},{<br />
name: "桃子",<br />
price: 99<br />
},{<br />
name: "菠萝",<br />
price: 371<br />
},{<br />
name: "橘子",<br />
price: 153<br />
}];<br />
<br />
//自定义标签<br />
$.views.tags({<br />
"isShow": function(price){<br />
var temp=price+''.split('');<br />
<br />
if(this.tagCtx.props.status === 0){<br />
//判断价格是否为水仙花数，如果是，则显示，否则不显示<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 />
<p> //渲染数据<br />
var html = $("#testTmpl").render(dataSrouce);<br />
$("#list").append(html);<br />
<br />
</script>
用helper代替自定义标签（推荐）
用helper代替自定义标签 --- by 杨元
<script><br />
//数据源<br />
var dataSrouce = [{<br />
name: "苹果",<br />
price: 108<br />
},{<br />
name: "鸭梨",<br />
price: 370<br />
},{<br />
name: "桃子",<br />
price: 99<br />
},{<br />
name: "菠萝",<br />
price: 371<br />
},{<br />
name: "橘子",<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 />
});
<p> //渲染数据<br />
var html = $("#testTmpl").render(dataSrouce);<br />
$("#list").append(html);<br />
<br />
</script>
完整实例代码点击此处本站下载。
希望本文所述对大家JsRender程序设计的学习有所帮助。
