JsRender for index循环索引用法详解


Posted in Javascript onOctober 31, 2014

本文实例讲述了JsRender for index循环索引用。分享给大家供大家参考。具体分析如下:

JsRedner和JsViews(JsViews是再JsRender基础上的进一步封装)被称为下一代的Jquery模板,官方地址:
https://github.com/BorisMoore/jsrender;
https://github.com/BorisMoore/jsviews。

循环是模版引擎必不可少的一部分,而说起循环,会引出一个至关重要的因素:索引。

所谓索引,即循环次数,通过索引,可以获取当前循环是第几次。

如果读者阅读过官方文档,会见到如下获取索引的方式:

data:

{

   names: ["Maradona","Pele","Ronaldo","Messi"]

}

template markup:
{{for names}}

   <div>

     <b>{{: #index+1}}.</b>

     <span>{{: #data}}</span>

   </div>

 {{/for}}

result:

1. Maradona

 2. Pele

 3. Ronaldo

 4. Messi

索引可以在循环中通过特殊字面量#index获取,特殊字面量#data相当于this,在本例中表示每一个name。

接下来我们搞点小花样,还是上边的例子,只不过这次我希望只显示以M开头的名字:

data:

{

   names: ["Maradona","Pele","Ronaldo","Messi"]

 }

template markup:
{{for names}}

   {{if #data.indexOf("M") == 0}}

     <div>

       <b>{{: #index+1}}.</b>

       <span>{{: #data}}</span>

     </div>

   {{/if}}

 {{/for}}

result:

Unavailable (nested view): use #getIndex()1. Maradona

 Unavailable (nested view): use #getIndex()1. Messi

简单加了个if判断,竟然报错了!

问题就出在#index上,错误提示很明确,让你用#getIndex()代替#index。

试试替换后的代码:

data:

{

   names: ["Maradona","Pele","Ronaldo","Messi"]

 }

template markup:
{{for names}}

   {{if #data.indexOf("M") == 0}}

     <div>

       <b>{{: #getIndex()+1}}.</b>

       <span>{{: #data}}</span>

     </div>

   {{/if}}

 {{/for}}

result:

1. Maradona

 4. Messi

这是为什么呢?简单说,就是因为{{if }}虽然不创建常规数据作用域,但却干扰了隐藏作用域。也就是说,{{if }}不会阻断常规数据(你传入的数据)的可见性,但会干扰隐藏数据(#index、#parent)的可见性。这样简单理解就可以了,不必深究,因为这仅仅是此框架的缺陷,并不是标准。

因此,本文给读者一个很重要的结论:尽量使用#getIndex()获取索引,避免使用#index,除非你的应用足够简单。

希望本文所述对大家JsRender的学习有所帮助。

Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
javascript常用函数归纳整理
Oct 31 #Javascript
让html页面不缓存js的实现方法
Oct 31 #Javascript
js读取cookie方法总结
Oct 31 #Javascript
jQuery获取对象简单实现方法小结
Oct 30 #Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 #Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 #Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 #Javascript
You might like
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python编写Logistic逻辑回归
2020/12/30 Python
selenium+python实现自动登录脚本
2018/04/22 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
对python中dict和json的区别详解
2018/12/18 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
学校消防演习方案
2014/02/19 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
践行三严三实心得体会
2014/10/13 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python