Question

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

我为这样的每周设置了一个集合架构，并在该周的日期对象作为参考。日期后显示的数字是可用的时段。取自蒙古：

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

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

^我想要实现的目标的图像。

Previosly，我设法很好地按下了按钮，但是他们没有任何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>

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

1 个答案: