如何使用jsredner迭代嵌套数组

时间:2012-11-29 00:56:50

标签: jquery arrays nested jsrender

我有以下json:

[
   {
      "Name":"Billy in the Lowground",
      "Key":"A",
      "chords":[
         [
            "G",
            "",
            "D",
            ""
         ],
         [
            "C",
            "",
            "G",
            ""
         ],
         [
            "C",
            "",
            "G",
            ""
         ],
         [
            "A",
            "",
            "D",
            ""
         ],
         [
            "G",
            "",
            "D",
            ""
         ],
         [
            "C",
            "",
            "G",
            ""
         ],
         [
            "C",
            "",
            "G",
            ""
         ],
         [
            "D",
            "",
            "G",
            ""
         ],
         "Em",
         "",
         "",
         "B7",
         "Em",
         "",
         [
            "C",
            "",
            "G",
            ""
         ],
         [
            "D",
            "",
            "G",
            ""
         ]
      ]
   }
];

在和弦下,我将每个小节映射到和弦数组中的一个点,然后每个小节是另一个与小节中的节拍数相对应的数组。在这种情况下,4节拍。

所以我在弄清楚如何迭代嵌套数组时遇到了问题但是当我写这个问题时,我想我找到了答案,但这是访问和迭代嵌套数组的最佳方法:

 <script id="chord-tpl" type="text/x-jsrender">  
                {{for chords}}
                    <tr>
                        {{for #parent.data[#index]}}

                            <td>{{:#parent.data[#index]}}</td>
                        {{/for}}
                    </tr>
                {{/for}}

        </script>

此外,我想知道是否有办法查看您对阵列进行了多少次迭代并根据#次数执行某些操作,

e.g。

for( i=0; i == chords.length; $i++ ) {
   if( i % 4 ) {
       // start new table row
   }
   else {
       // echo out table cell
   }
}

1 个答案:

答案 0 :(得分:2)

  

这是访问和迭代嵌套数组的最佳方法

您可以将模板修改为:

{{for chords}}
    <tr>
       {{for #data}}
           <td>{{:#data}}</td>
       {{/for}}
    </tr>
{{/for}}

  

我想知道是否有办法查看你在阵列上迭代了多少次并根据次数做了一些事情

您允许引入变量。

{{for chords ~count=chords.length}}

您可以找到更多详细信息here


您还可以使用"helper functions"调试模板 此代码段可以帮助您

$.views.helpers({
  debug:function(){
     console.dir(this);
  }
});