创建使用下划线和骨干JS模板如表日历 [英] Creating a Calendar like table using underscore and backbone js templates

问题描述

大家好，我在骨干网和下划线共小白。我需要创建一个表中显示了一些日期预约登记服务。我要使它看起来像这样：

Hi Guys I am a total noob at backbone and underscore. I need to create a table that shows appointment bookings for some dates. I have to make it look something like this:

这是我收集的样子：

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

我在做什么目前我的下划线模板是：

What I am doing currently in my underscore template is:

<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>

什么改变我对我的模板，给它像上面图片的结构？

What changes do I make to my template to give it a structure like the picture above?

感谢

推荐答案

您的数据结构是有点乏味一起玩。
我建议在您的模板打造的表头和放大器做2遍;主体分离。

Your data structure is a little tedious to play with. I would suggest doing 2 passes in your template to build the table header & body separately.

下面就是我想说的：

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

拨弄它的你。希望你可以把它进一步从这里开始。

fiddled it for you. Hope you can take it further from here.

好运

这篇关于创建使用下划线和骨干JS模板如表日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！