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>

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