Meteor/Mongodb：如何遍历数组并使用 html 在模板中获取遍历对象的详细信息？

Question

我正在尝试在 Meteor 中创建一个用于预订的 web 应用。

我有一个像这样为每周设置的集合模式，并以该周星期一的日期对象作为参考。天后显示的数字是可用的插槽。取自蒙古：

{
  "_id": "CtXjDeaH7KE6YsubJ",
  "mondayDate": "2016-07-25T00:00:00.000Z",
  "timeslots": [
    {
      "slot": "0800 to 1000",
      "days": [
        {
          "25/7": 1,
          "26/7": 2,
          "27/7": 0,
          "28/7": 0,
          "29/7": 1,
          "30/7": 0,
          "31/7": 2
        }
      ]
    },
    {
      "slot": "1000 to 1200",
      "days": [
        {
          "25/7": 1,
          "26/7": 2,
          "27/7": 0,
          "28/7": 0,
          "29/7": 2,
          "30/7": 1,
          "31/7": 0
        }
      ]
    },
    {
      "slot": "1200 to 1400",
      "days": [
        {
          "25/7": 1,
          "26/7": 2,
          "27/7": 3,
          "28/7": 0,
          "29/7": 0,
          "30/7": 0,
          "31/7": 2
        }
      ]
    },
    {
      "slot": "1400 to 1600",
      "days": [
        {
          "25/7": 0,
          "26/7": 2,
          "27/7": 0,
          "28/7": 2,
          "29/7": 0,
          "30/7": 1,
          "31/7": 1
        }
      ]
    },
    {
      "slot": "1600 to 1800",
      "days": [
        {
          "25/7": 0,
          "26/7": 2,
          "27/7": 0,
          "28/7": 2,
          "29/7": 0,
          "30/7": 1,
          "31/7": 1
        }
      ]
    }
  ]
}

在我的模板中，我想使用空格键创建一个网格，每天每个时间段都有一个按钮。

^ 我想要实现的图像。

以前，我设法让按钮布局得很好，但是它们没有任何 id 值可以传递到下一步 - 将确切的插槽信息传输到另一个集合以进行确认预订。

我需要将时间段和日期包含在每个按钮 ID 中。如何使用空格键实现这一点？我无法引用数组中的正确项目。

<!-- table stuff -->
<tbody>
  {{>schedtable thisweekdata}} <!-- thisweekdata is a helper function, it returns "timeslots" from the array above -->
</tbody>
<!-- etc... -->

<template name="schedtable">
  {{#each this}}
  <tr>
    <td>{{slot}}</td> <!-- works, this appears in the browser for each timeslot-->
    {{>eachslot days}}
  </tr>
</template>

<template name="eachslot">
  <td>
    {{#each this}}

      <!-- I'm doing something wrong here, it only traverses
      once across what I think is the timeslots.days array and it's done -->


      <button id={{this.?????}}>Click to Book</button>
      <!-- this is where I need help, how do I get it to
      iterate the length of the timeslots.days array, and also 
      push the value of each item into the id? Something like
      this.[i] where i can dynamically traverse the array. Can I
      obtain the key value? ("25/7","26/7", etc) -->


    {{/each}}
  </td>
</template>

我知道我可能还需要稍微更改一下我的架构。

Answer 1

我是个假人，我想通了。 首先，我的架构是错误的。对于days 数组，我有一个只有一个对象的数组，它每天都有多个对象。为了解决这个问题，我将days 数组更改为一个对象数组，其中有两个字段d 和free，分别表示日期和空闲槽的数量。

{
  "_id": "CtXjDeaH7KE6YsubJ",
  "mondayDate": "2016-07-25T00:00:00.000Z",
  "timeslots": [
    {
      "slot": "0800 to 1000",
      "days": [
        {
          "d": "2016-07-25",
          "free": 1
        },
        {
          "d": "2016-07-26",
          "free": 2
        },
        {
          "d": "2016-07-27",
          "free": 0
        },
        {
          "d": "2016-07-28",
          "free": 0
        },
        {
          "d": "2016-07-29",
          "free": 2
        },
        {
          "d": "2016-07-30",
          "free": 0
        },
        {
          "d": "2016-07-31",
          "free": 1
        }
      ]
    },
    {
      "slot": "1000 to 1200",
      "days": [
        {
          "d": "2016-07-25",
          "free": 1
        },
        {
          "d": "2016-07-26",
          "free": 2
        },
        {
          "d": "2016-07-27",
          "free": 0
        },
        {
          "d": "2016-07-28",
          "free": 0
        },
        {
          "d": "2016-07-29",
          "free": 2
        },
        {
          "d": "2016-07-30",
          "free": 0
        },
        {
          "d": "2016-07-31",
          "free": 1
        }
      ]
    },
    {
      "slot": "1200 to 1400",
      "days": [
        {
          "d": "2016-07-25",
          "free": 1
        },
        {
          "d": "2016-07-26",
          "free": 2
        },
        {
          "d": "2016-07-27",
          "free": 0
        },
        {
          "d": "2016-07-28",
          "free": 0
        },
        {
          "d": "2016-07-29",
          "free": 2
        },
        {
          "d": "2016-07-30",
          "free": 0
        },
        {
          "d": "2016-07-31",
          "free": 1
        }
      ]
    },
    {
      "slot": "1400 to 1600",
      "days": [
        {
          "d": "2016-07-25",
          "free": 1
        },
        {
          "d": "2016-07-26",
          "free": 2
        },
        {
          "d": "2016-07-27",
          "free": 0
        },
        {
          "d": "2016-07-28",
          "free": 0
        },
        {
          "d": "2016-07-29",
          "free": 2
        },
        {
          "d": "2016-07-30",
          "free": 0
        },
        {
          "d": "2016-07-31",
          "free": 1
        }
      ]
    },
    {
      "slot": "1600 to 1800",
      "days": [
        {
          "d": "2016-07-25",
          "free": 1
        },
        {
          "d": "2016-07-26",
          "free": 2
        },
        {
          "d": "2016-07-27",
          "free": 0
        },
        {
          "d": "2016-07-28",
          "free": 0
        },
        {
          "d": "2016-07-29",
          "free": 2
        },
        {
          "d": "2016-07-30",
          "free": 0
        },
        {
          "d": "2016-07-31",
          "free": 1
        }
      ]
    }
  ]
}

然后在我的模板html中：

<template name="schedtable">
{{#each this}} <!-- will iterate over each timeslot -->
    <tr>
      <td>{{slot}}</td>
      {{> eachslot days }}
    </tr>
  {{/each}}
</template>

<template name="eachslot">
  {{#each item in this}}
    <td>
      {{#if item.free}}
        <button class="btn btn-success bookbtn" id={{item.d}}{{../slot}}>Book this slot</button>
      {{else}}
        <button class="btn btn-disabled" >Not Available</button>
      {{/if}}
    </td>
  {{/each}}
</template>