JsRender for index循环索引用法详解

本文实例讲述了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的学习有所帮助。

赞 (0)

相关推荐

  • javascript forEach通用循环遍历方法

    复制代码 代码如下: var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { if (array == null) return; //对String进行特殊处理 if(typeof array == 'string'){ array = array.split(''); } var i = 0,length = array.length; for (;i < l

  • js使用for循环及if语句判断多个一样的name

    var items = document.getElementsByName("spec_spec_1[]"); alert(items.length); for (i = 0; i < items.length; i++) { if(items[i].value==''){ alert('名称不能为空'); } }

  • javascript for循环从入门到偏门(效率优化+奇特用法)

    一,for循环的基本写法 代码如下: 复制代码 代码如下: //例一for(var i=1;i<=10;i++) { alert(i); } 这段代码太简单了,我都不好意思拿出手.代码的执行结果是依次弹出1到10,PS:在早期的IE如IE6中,你把10改成10000,就能让用户一直点确定什么也不能干了哈哈--不要说是我出的主意. 由于这是一篇基础课程,所以我们回归正题来详细分析一下这段代码吧. for循环的结构都是类似的,任意一个for循环都是这样的: for(开始前;循环进行的条件;循环一次结

  • javascript下for循环用法小结

    我们最常用的一种是 for(循环变量初值;循环条件;递增值){语句;}  例 for(var x=0;x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面说下其它的用法  (1)省略表达式1,这个时候应在for语句前给循环变量赋初值,注意其后的;不能省略  例: var x=0; for(;x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] (2) 省略表达式2,也就是循环条件循环无终止进行,也就是表达式2始终为真.  例: for(var x=0;;x++) { d

  • js使用for循环与innerHTML获取选中tr下td值

    function getParentEl (el, tagName) { if (!el) return el; do { el = el.parentNode; } while(el && el.tagName !== tagName); return el; } function temp(){ //得到选中row的value值 var temp=document.getElementsByName('id'); for(var i=0;i<temp.length;i++){ i

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • JS for循环中i++ 和 ++i的区别介绍

    平时都是这样写的for循环, for(var i = 0; i < 20 ; i++){ .... } 但我看有的人这样写 for (var i = 0; i < 20 ; ++i) { .... } 这样会对for循环有什么影响? 1.在for里好像没啥区别... 但是用在赋值的时候, 就有区别了... var a = 1; var b = a++; var c = 1; var d = ++c; console.log(b,d); // 1, 2 a++ 是先应用a, 然后再自加 ++a

  • javascript中for/in循环及使用技巧

    JavaScript 支持不同类型的循环: for - 循环代码块一定的次数 for/in - 循环遍历对象的属性 while - 当指定的条件为 true 时循环指定的代码块 do/while - 同样当指定的条件为 true 时循环指定的代码块 1. in运算符:要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数是一个对象或数组.如果该运算符左边的值是右边对象的一个属性名,则返回true. 例如: var point={x:1,y:2}; //对象直接量 var has_x=

  • js 数组的for循环到底应该怎么写？

    js 数组的for循环到底应该怎么写？

    然后来看看今天我开始怀疑哪个权威哦家伙了... 自从开始学编程,自从接触到数组这个东西,我就一直在不同的地点和不同的时间不断看到有人提醒:在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦,而不要用for(var i=0;i>arr.length;i++)的方式哦,因为用脑子想想也知道,第二种方法的第二部分会一直去计算数组的length,所以自然效率比较低. 哦?我们这里不说其他程序语言,而只讨论js,因为不同的语言,实现可能不同,其

  • JS使用for循环遍历Table的所有单元格内容

    JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

随机推荐