/ /アンダースコアとバックボーンのjsテンプレートを使用した表のようなカレンダーの作成 - javascript、backbone.js、underscore.js

アンダースコアとバックボーンのjsテンプレート(javascript、backbone.js、underscore.js)を使ってカレンダーのような表を作成する

こんにちは私はバックボーンとアンダースコアの合計noobです。私はいくつかの日付の予約予約を表示するテーブルを作成する必要があります。私はそれをこのように見なければならない:

ここに画像の説明を入力

これは私のコレクションのようです:

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

テンプレートに上記のような構造を与えるためにどのような変更を加えましたか?

ありがとう

回答:

回答№1は1

あなたのデータ構造は少し面倒です。 私はテーブルヘッダーとボディを別々に構築するためにテンプレートで2回のパスを行うことをお勧めします。

ここでは私が何を言おうとしているのですか?

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

それを手に入れた あなたのために。 あなたはここからさらにそれを取ることができますように願っています。

がんばろう