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+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
简单实现JS计算器功能
Dec 21 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
JS请求servlet功能示例
Jun 01 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 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
一个程序下载的管理程序(一)
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
javascript数组排序汇总
2015/07/07 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Structs界面控制层技术
2013/10/11 面试题
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL