Question

我收到的JSON中有两个对象，objA＆amp; objB，每个都包含一个数组。

{
  "objA": {
    "arrayA": [
      {
        "varA": "1"
      },
      {
        "varA": "2"
      },
      {
        "varA": "3"
      },
      {
        "varA": "4"
      }
    ]
  },
  "objB": {
    "arrayB": [
      {
        "varB": "1"
      },
      {
        "varB": "2"
      },
      {
        "varB": "3"
      },
      {
        "varB": "4"
      }
    ]
  }
}

我需要编写一个Handlebars辅助函数，以某种方式同时迭代两个对象并打印这样的东西：

<p>1 - 1</p>
<p>2 - 2</p>
<p>3 - 3</p>
<p>4 - 4</p>

重新排列JSON的计算量很大，实际上并不在我的控制之下。知道我怎么能做到这一点？

Answer 1

我实际上只是在将数据扔进Handlebars之前迭代数据，就像这样，如果你像对象那样得到对象，我会做这样的事情：

<script id="handlebartemplate" type="text/x-handlebars-template">
    {{#each finalData}}
        <p>{{this.varA}} - {{this.varB}}</p>
    {{/each}}
</script>

<script type="text/javascript">
    var returnedData = {
        "objA": {
            "arrayA": [
                {
                    "varA": "1"
                },
                {
                    "varA": "2"
                },
                {
                    "varA": "3"
                },
                {
                    "varA": "4"
                }
            ]
        },
        "objB": {
            "arrayB": [
                {
                    "varB": "1"
                },
                {
                    "varB": "2"
                },
                {
                    "varB": "3"
                },
                {
                    "varB": "4"
                }
            ]
        }
    };

    var finalData = [];
    $.each( returnedData.objA.arrayA, function(key,val){
        finalData.push({
            varA: val.varA,
            varB: returnedData.objB.arrayB[key].varB
        })
    })

    var source   = $("#handlebartemplate").html();
    var template = Handlebars.compile(source);
    var context = {finalData: finalData};
    var html    = template(context);

    document.write(html);
</script>

正如你所看到的，我首先设置模板只是为了显示var A或var B，我把它设置为只有你的对象，显然你会以你现在正在做的任何方式检索它。

接下来，我遍历对象并创建一个新对象，其中包含所有绑定在一起的正确信息。

您也可以使用索引，或者注册帮助程序来获取相关数据，这里有类似的内容：Handlebars array access with dynamic index

但是我的方式使得你不需要注册一个新的帮助器，它在模板中看起来更清晰。

Handlebars helper函数同时迭代两个对象

1 个答案: