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

I'm trying to creating a webapp in Meteor for bookings.

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

I have an collection schema set up for each week like this, with a date object on that week's Monday as reference. the numbers displayed after the days are slots available. Taken from mongol:

我有一个像这样的每周设置的集合模式,在该周的星期一作为参考的日期对象。日期后显示的数字是可用的时段。取自蒙古:

{
  "_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
        }
      ]
    }
  ]
}

In my template, with spacebars, I want to create a grid that has one button per timeslot per day.

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

^ an image of what I want to achieve.

^我想要实现的图像。

Previosly, I managed to get the buttons laid out nicely, however they didn't have any id values to pass on to the next step -- transferring the exact slot information to another collection for confirmed bookings.

有一点,我设法得到了很好的按钮,但他们没有任何id值传递到下一步 - 将确切的插槽信息传输到另一个集合以确认预订。

I need the timeslot and the date to be included into each button id. How do I achieve that with spacebars? I have trouble referring to proper items in the the array.

我需要将时间段和日期包含在每个按钮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>

I understand I might have to change my schema a bit as well.

我知道我可能还需要改变我的架构。

1 个解决方案

#1

I'm a dummy, I figured it out. First off, my schema was wrong. For the days array, I had an array of only one object, which had multiple objects for each day. To fix it, I changed the days array to be an array of objects, which had two fields, d and free, to represent the date and the number of free slots.

我是个假人,我想通了。首先,我的架构是错误的。对于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
        }
      ]
    }
  ]
}

Then in my template html:

然后在我的模板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>