JsRender实用入门教程实用入门教程
本文是一篇JsRender的实用入门教程,实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。
具体如下:
前言前言
JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点:
· 简单直观
· 功能强大
· 可扩展的
· 快如闪电
这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传。。。
由于工作需要,小菜才接触到此款模版引擎。使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反
倒让人觉得很难理解。
另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不
到,几乎就是没有结果。
再加上JsRender有些地方确实是不好理解,所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用,小菜总结了一些实用经验,当然,这些经验在官方文档上是找不到的。
嵌套循环使用#parent访问父级数据(不推荐)
代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>嵌套循环使用#parent访问父级数据 — by 杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th width=”10%”>序号</th>
<th width=”10%”>姓名</th>
<th width=”80%”>家庭成员</th>
</tr>
</thead>
<tbody id=”list”>
</tbody>
</table>
</div>
<script src=”jquery.min.js”></script>
<script src=”jsviews.js”></script>
<!– 定义JsRender模版 –>
<script id=”testTmpl” type=”text/x-jsrender”>
<tr>
<td>{{:#index + 1}}</td>
<td>{{:name}}</td>
<td>
{{for family}}
{{!– 利用#parent访问父级index –}}
<b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b>