在模板中的Ember.js对象上发出迭代

Issue Iterating Over Ember.js Object in Template

本文关键字：对象 迭代 js Ember      更新时间：2023-10-08

我在模板中的Ember.js中迭代对象和数组时遇到问题。我确信这是我实现Handlebars迭代器的一种方式，但我似乎无法理解。

Records = {
    data: [
            [
                recordID: "1234",
                recordName: "Record Name"
            ],
            [
                recordID: "1235",
                recordName: "Record Name 5"
            ],
            [
                recordID: "1236",
                recordName: "Record Name 6"
            ]
          ],
    otherInformation: "Other Info",
    moreInformation: "More Information"
}

然后我得到的模板输出如下。。。

{{#each Records.data}}
    {{this}}
{{/each}}

这只给了我数据数组中的第一条记录，但我希望能够访问子数组中的每个数组和每个键，以便输出特定的值。

正如Marcio Rodrigues所说，您的数组文字无效。

//编辑以进行澄清：javascript数组可以包含对象。对象是基元、数组、文字符号或函数中的对象。您试图在数组中插入键值对，但这两者都不是。

在嵌套数组中，有一个键值对，它不能单独存在，必须包含在对象文字中。如果你确实想保留嵌套的数组结构，并将属性作为数组中的元素，那么一种方法就是

Records = {
    data: [
        [
            { aKey: "recordID", aValue: "1234" },
            { aKey: "recordName", aValue: "Record Name XY" },
        ],
        [
            { aKey: "recordID", aValue: "12356" },
            { aKey: "recordName", aValue: "Record Name AB" },
        ]
    ],
    otherInformation: "Other Info",
    moreInformation: "More Information"
}

然后，在您的模板中，您可以对其进行迭代：

<script type="text/x-handlebars" data-template-name="index">  
  {{#each record in Records.data}}
    {{#each attributePair in record}}
      {{attributePair.aKey}}:{{attributePair.aValue}}
      <br />
    {{/each}}
  {{/each}}
</script>

您的Record.data数组似乎不正确，您有两个嵌套数组，对象声明不正确。我使用进行此操作

Javascript

Records={
    data: [
        {
            recordID: "1234",
            recordName: "Record Name"
        },
        {
            recordID: "1235",
            recordName: "Record Name 5"
        },
        {
            recordID: "1236",
            recordName: "Record Name 6"
        }
    ],
    otherInformation: "Other Info",
    moreInformation: "More Information"
}

模板

  {{#each Records.data}}
    {{recordID}}
  {{/each}}

请看一下http://jsfiddle.net/marciojunior/m7khc/

相关文章：