javascript - 使用下划线和主干 js 模板创建类似于表的日历

Question

嗨，伙计们，我是骨干和下划线的菜鸟。我需要创建一个表格来显示某些日期的预约。我必须让它看起来像这样：

这是我的收藏的样子：

    [
    {"id":0, "startDate":"04/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]},
    {"id":0, "startDate":"05/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]}
]

我目前在下划线模板中所做的是：

<div class="table-responsive">
    <div class="row">

    </div>
    <table id="stbl" class="table table-striped table-condensed table-bordered">
        <% _.each(slots, function(slot) { %>
              <tr>
                <td>
                   <strong> <%- slot.startDate %> </strong>
                </td>
                <% _.each(slot.timeSlots, function(t) { %>
                    <td>
                       <button id="timeslot" data-provider="<%- slot.providerID %>" data-time="<%- t %>" data-date="<%- slot.startDate %>" class="btn btn-small btn-blue"><span><%- t %></span></button>
                    </td>
                <% }); %>
               </tr>
         <% }); %>
</table>
</div>

我对模板进行了哪些更改以使其具有如上图所示的结构？

谢谢

Answer 1

你的数据结构玩起来有点乏味。我建议在您的模板中执行 2 次传递以分别构建表头和正文。

这就是我想说的：

// template start 
<table>
  <thead>
    /* ...code to create header */
  </thead>
  <tbody>
  /* ... code to create row entries */
  </tbody>
</table>
// template end

为你摆弄它。希望你能从这里走得更远。

祝你好运