Javascript 使用下划线和主干js模板创建类似日历的表
嗨,伙计们,我是个彻头彻尾的笨蛋。我需要创建一个表来显示某些日期的预约。我必须让它看起来像这样: 以下是我的收藏:Javascript 使用下划线和主干js模板创建类似日历的表,javascript,backbone.js,underscore.js,Javascript,Backbone.js,Underscore.js,嗨,伙计们,我是个彻头彻尾的笨蛋。我需要创建一个表来显示某些日期的预约。我必须让它看起来像这样: 以下是我的收藏: [ {"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/1
[
{"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>
我对模板做了哪些更改,使其具有如上图所示的结构
谢谢您的数据结构有点乏味。 我建议在模板中进行两次遍历,分别构建表头和表体 我想说的是:
// template start
<table>
<thead>
/* ...code to create header */
</thead>
<tbody>
/* ... code to create row entries */
</tbody>
</table>
// template end
//模板启动
/*…创建标头的代码*/
/* ... 创建行条目的代码*/
//模板端
给你。希望你能从这里走得更远
祝你好运