JsRender基础语法循环和判断

for循环

循环一般数组

<script id="forNumTemp" type="text/template">{{for}}<p>{{:#data}}--索引{{:#getIndex()}}</p>{{/for}}
</script>
<script>var nums=[2,5,8,9,6,3,7,4,1];var numTemp=$("#forNumTemp").render(nums);
</script>

需要注意的是for循环中，{{for}} 标签需要闭合 {{/for}} 明确作用域，我们可以通过 {{：#index}} 或者 {{：#getIndex()}} 方法获取每次循环对应的索引，但是有时候我们在某些情况下是不能使用 {{：#index}} 获取索引的，所以我们一般都只是用
{{：#getInex()}} 方法获取索引，由于 **render()**方法可以自自动遍历数组，所以这个例子里面我们也可以不用使用 {{for}} 标签进行循环数据，可以使用 {{：#data}} 直接获取循环的每一项。

循环对象数组

<script id="forObjTemp" type="text/template">{{for}}<p>{{:name}}--{{:#data.old}}--索引{{:#getIndex()}}</p>{{props #data}}<p>{{:key}}--{{:prop}}</p>{{/props}}{{/for}}
</script>var users=[{name:'Tim',old:18},{name:'Tom',old:19}];var objTemp=$("#forObjTemp").render(users);$("div").html(objTemp);
<script>
</script>

循环对象的时候我们使用 {{:#data}} 的到的数据是每次循环的一个对象，然后可以通过 {{:#data.old}} 这种点运算符来获取对象的每一个属性。但是我们一般不这样使用，我们可以直接使用该对象的属性 {{:name}} 来获取对象对应的的属性的值。如果我们要获取对象的属性的名称时，我们可以使用 {{prop}} 标签来获取对象的属性名称，需要注意的是 {{prop}} 也是需要闭合标签的 {{/prop}}，然后在 {{prop}} 中，使用 {{:key}} 来获取对应属性的名称，使用 {{：prop}} 来获取属性的对应的值。

使用循环外部的变量

   <script id="useArgTemp" type="text/template"><p>{{:arg1}}</p><p>{{:arg2}}</p>{{for nums ~arg1=arg1 ~arg2=arg2}}<p>数组中的数字{{:#data}}--{{:~arg1}}--{{:~arg2}}--{{:#index}}</p>{{/for}}</script><script>var obj={arg1:"arg1",arg2:"arg2",nums:[5,8,9]};var temp=$("#useArgTemp").render(obj);$("div").html(temp);</script>

如果在循环中我们需要使用外部的变量，则需要在循环时，使用 :~TempVariable=Variable 来定义并赋值for循环中要使用的变量，TempVariable是循环中要使用的变量的名称，Variable是循环外部的变量名称，在循环内部，我们使用 {{:~TempVariable}} 来使用外部变量的值。

双重循环

1.两个毫无关系的数组

  <script id="douFor" type="text/template">{{for arr1 ~tarr=arr2}}<p>{{:#data}}----{{:~tarr}}</p>{{for ~tarr}}<p>{{:#data}}---{{:#parent.parent.data}}</p>{{/for}}{{/for}}</script><script>var arrs={arr1:[1,2,3,4,5],arr2:[99,88,77,66,55]};var douTemp=$("#douFor").render(arrs);</script>

因为这两个数组是平级数组，如果我们在循环A数组中的内部，循环B数组，那么只能在循环A数组的时候吧B数组当做参数，将B数组传入到A数组中，然后就可以在A数组的循环内部去循环B数组。如果要在B数组中使用A数组中的循环的值，则我们需要使用 {{:#prent.parent.data}} 来取到上一级循环的数据。

2.对象数组中包含数组

    <script id="userArrsFor" type="text/template">{{for}}<p>{{:name}}</p>{{for arrs}}<p>{{:#data}}</p>{{/for}}{{/for}}</script><script>var userArrs=[{name:"Tim",arrs:[1,2,3,4,5]},{name:"Jim",arrs:[11,22,33,44,55]},];var duserArrsForTemp=$("#userArrsFor").render(userArrs);$("div").html(duserArrsForTemp);</script>

如果我们在循环对象数组的时候，对象中也有数组，那么我们在每次循环对象数组的时候，去循环对象中包含数组的属性即可。