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>
{{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}}
{{!-- #data相当于this --}}
{{:#parent.parent.data.name}}的{{:#data}}
{{/for}}
</td>
</tr>
</script> <script>
//数据源
var dataSrouce = [{
name: "张三",
family: [
"爸爸",
"妈妈",
"哥哥"
]
},{
name: "李四",
family: [
"爷爷",
"奶奶",
"叔叔"
]
}]; //渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html); </script> </body>
</html>
嵌套循环使用参数访问父级数据（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套循环使用参数访问父级数据 --- 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循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}
{{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}
{{for family ~parentIndex=#index ~parentName=name}}
<b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
{{!-- #data相当于this --}}
{{:~parentName}}的{{:#data}}
{{/for}}
</td>
</tr>
</script> <script>
//数据源
var dataSrouce = [{
name: "张三",
family: [
"爸爸",
"妈妈",
"哥哥"
]
},{
name: "李四",
family: [
"爷爷",
"奶奶",
"叔叔"
]
}]; //渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html); </script> </body>
</html>
自定义标签(custom tag)中使用else（强烈不推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义标签中使用else --- by 杨元</title>
<style>
</style> </head>
<body> <div>
<table>
<thead>
<tr>
<th width="50%">名称</th>
<th width="50%">单价</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>{{:name}}</td>
<td>
{{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}}
{{isShow price status=0}}
{{:price}}
{{else price status=1}}
--
{{/isShow}}
</td>
</tr>
</script> <script>
//数据源
var dataSrouce = [{
name: "苹果",
price: 108
},{
name: "鸭梨",
price: 370
},{
name: "桃子",
price: 99
},{
name: "菠萝",
price: 371
},{
name: "橘子",
price: 153
}]; //自定义标签
$.views.tags({
"isShow": function(price){
var temp=price+''.split(''); if(this.tagCtx.props.status === 0){
//判断价格是否为水仙花数，如果是，则显示，否则不显示
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 "";
} }
}); //渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html); </script> </body>
</html>
用helper代替自定义标签（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用helper代替自定义标签 --- by 杨元</title>
<style>
</style> </head>
<body> <div>
<table>
<thead>
<tr>
<th width="50%">名称</th>
<th width="50%">单价</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>{{:name}}</td>
<td>
{{!-- 利用原生的if做分支跳转，利用helper做逻辑处理 --}}
{{if ~isShow(price)}}
{{:price}}
{{else}}
--
{{/if}}
</td>
</tr>
</script> <script>
//数据源
var dataSrouce = [{
name: "苹果",
price: 108
},{
name: "鸭梨",
price: 370
},{
name: "桃子",
price: 99
},{
name: "菠萝",
price: 371
},{
name: "橘子",
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;
}
}
}); //渲染数据
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html); </script> </body>
</html>
代码打包
JsRender实用教程(tag else使用、循环嵌套访问父级数据)的更多相关文章
- jsrender-for循环中访问父属性
jsrender中使用for循环数据时有时需要访问父级数据. 而jsrender在循环中的父级数据存放在隐藏属性parent.parent.data中,使用案例如下 {{:#parent.parent ...
- ng-repeat 嵌套访问父作用域里的属性
在一个项目中,需要嵌套循环输出一个二维表的里的数据 数据结构 [ { id:1, list:[ { id:1, name:'li' } ] }, { id:2, list:[ { id:1, name ...
- JsRender实用入门教程
这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用.循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下 本文是一篇JsRend ...
- freeRTOS中文实用教程3--中断管理之中断嵌套
1.前言 最新的 FreeRTOS 移植中允许中断嵌套.中断嵌套需要在 FreeRTOSConfig.h 中设置configKERNEL_INTERRUPT_PRIORITY 和configMAX_S ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- 学习笔记之Java程序设计实用教程
Java程序设计实用教程 by 朱战立 & 沈伟 学习笔记之JAVA多线程(http://www.cnblogs.com/pegasus923/p/3995855.html) 国庆休假前学习了 ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...
随机推荐
- (转)linux获取/查看本机出口ip
获取/查看本机出口ip curl http://members.3322.org/dyndns/getip 1 curl ifconfig.me 2 #或者 3 curl http://member ...
- C#语法灵活运用之排列组合算法
今天群里有朋友求一个排列组合算法,题目是给定长度,输出所有指定字母的组合. 如指定字母a.b.c.d.e.f,长度为2,则结果应为:aa.ab.ac ... ef.ff. 有朋友给出算法,很有特色: ...
- plink:将bed文件转化为ped,map文件
用--recode命令,--out表示转化的文件的名字,本例已经命名为“filter” /plink-1.07-x86_64/plink --bfile filter --recode --out f ...
- wcf session开启
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] pu ...
- node.js 基础学习笔记2
Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...
- 行锁sqlserver
SELECT COUNT(1) FROM BLBQ_Sys_TableId With (RowLock,UpdLock) WHERE Table_Name = @Table_Name commit ...
- hibernate进行多表联合查询
hibernate是按照hql语句来进行查询的, 里面所使用的表名, 其实是实体类的名字, hql语句的写法并没有多大差别, 是在返回结果的时候要稍微做一些处理 //使用hibernate进行多表查询 ...
- Java中XML格式的字符串4读取方式的简单比较
Java中XML格式的字符串4读取方式的简单比较 1.java自带的DOM解析. import java.io.StringReader; import javax.xml.parsers.Docum ...
- ng-repeat指令应用
1.ng-repeat 一看就知道跟foreach等指令类似,用于循环重复.一般用于列表和表格中.用法如下: <tr ng-repeat="data in dataList" ...
- 第六章 springboot + 事务
在实际开发中,其实很少会用到事务,一般情况下事务用的比较多的是在金钱计算方面. mybatis与spring集成后,其事务该怎么做?其实很简单,直接在上一节代码的基础上在相应的方法(通常是servic ...