Jquery模板中的二維列表

我在使用Jquery模板時遇到了一些麻煩，並且似乎無法找出問題所在。這很可能是我使用每個內部的方式（找不到任何好的示例如何做到這一點）。Jquery模板中的二維列表

運行.tmpl函數時出現錯誤。

$("#calendarListTemplate").tmpl(json)

，並說：

未捕獲的語法錯誤：在jquery.tmpl.min.js

這裏的1號線突發標識的模板：

<script id="calendarListTemplate" type="text/x-jquery-tmpl"> 

    ${{each eventDayGroups}} 

     <li class="todaysEventDayListelement"> 

      ${{each ${data.eventDayList}}} 

       <div id="eventDay" class="eventDay ${$data.eventDayClass}"> 

        <div class="day"> 
         ${$data.dateDay} 
        </div> 

        <div class="monthYear"> 
         ${$data.dateMonthYear} 
        </div> 

        <div id="eventCounter" class="eventCounter ${$data.counterClass}"> 
         ${$data.count} 
        </div> 

        <div style="display:none" class="date"> 
         ${$data.date} 
        </div> 
       </div> 

      {{/each}} 

     </li> 

    {{/each}} 

</script>

而這裏的JSON

{ "eventDayGroups" : [ { "eventDayList" : [ { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "27.08.2011", 
      "dateDay" : "27", 
      "dateMonthYear" : "Aug 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "28.08.2011", 
      "dateDay" : "28", 
      "dateMonthYear" : "Aug 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 3, 
      "counterClass" : "eventCountSingle", 
      "date" : "29.08.2011", 
      "dateDay" : "29", 
      "dateMonthYear" : "Aug 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "30.08.2011", 
      "dateDay" : "30", 
      "dateMonthYear" : "Aug 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "31.08.2011", 
      "dateDay" : "31", 
      "dateMonthYear" : "Aug 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 5, 
      "counterClass" : "eventCountSingle", 
      "date" : "01.09.2011", 
      "dateDay" : "01", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 5, 
      "counterClass" : "eventCountSingle", 
      "date" : "02.09.2011", 
      "dateDay" : "02", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 3, 
      "counterClass" : "eventCountSingle", 
      "date" : "03.09.2011", 
      "dateDay" : "03", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "04.09.2011", 
      "dateDay" : "04", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     } 
     ] }, 
    { "eventDayList" : [ { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "05.09.2011", 
      "dateDay" : "05", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "06.09.2011", 
      "dateDay" : "06", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 3, 
      "counterClass" : "eventCountSingle", 
      "date" : "07.09.2011", 
      "dateDay" : "07", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "08.09.2011", 
      "dateDay" : "08", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "09.09.2011", 
      "dateDay" : "09", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "10.09.2011", 
      "dateDay" : "10", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "11.09.2011", 
      "dateDay" : "11", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "12.09.2011", 
      "dateDay" : "12", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "13.09.2011", 
      "dateDay" : "13", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     } 
     ] }, 
    { "eventDayList" : [ { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "14.09.2011", 
      "dateDay" : "14", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "15.09.2011", 
      "dateDay" : "15", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 3, 
      "counterClass" : "eventCountSingle", 
      "date" : "16.09.2011", 
      "dateDay" : "16", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "17.09.2011", 
      "dateDay" : "17", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "18.09.2011", 
      "dateDay" : "18", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 3, 
      "counterClass" : "eventCountSingle", 
      "date" : "19.09.2011", 
      "dateDay" : "19", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 1, 
      "counterClass" : "eventCountSingle", 
      "date" : "20.09.2011", 
      "dateDay" : "20", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "21.09.2011", 
      "dateDay" : "21", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     }, 
     { "count" : 2, 
      "counterClass" : "eventCountSingle", 
      "date" : "22.09.2011", 
      "dateDay" : "22", 
      "dateMonthYear" : "Sep 2011", 
      "eventDayClass" : "" 
     } 
     ] } 
] }

來源

2011-10-03 nikolaia

很高興你設法修復它在你自己的！如果您可以將您的問題恢復到其原始狀態並將您的解決方案作爲答案發布，那將會非常棒。這樣，面臨類似問題的人可能會從你學到的東西中獲益。 – vzwick

在8小時過去之前，不能回答我自己的問題。那麼我會考慮這樣做。 – nikolaia

我自己修復了它。正如我懷疑我寫了錯誤的模板。這裏是正確的方法：

<script id="calendarListTemplate" type="text/x-jquery-tmpl"> 

    {{each eventDayGroups}} 

     <li class="todaysEventDayListelement"> 

      {{each eventDayList}} 

       <div id="eventDay" class="eventDay ${$value.eventDayClass}"> 

        <div class="day"> 
         ${$value.dateDay} 
        </div> 

        <div class="monthYear"> 
         ${$value.dateMonthYear} 
        </div> 

        <div id="eventCounter" class="eventCounter ${$value.counterClass}"> 
         ${$value.count} 
        </div> 

        <div style="display:none" class="date"> 
         ${$value.date} 
        </div> 
       </div> 

      {{/each}} 

     </li> 

    {{/each}} 

</script>

來源

2011-10-04 06:42:35 nikolaia

Jquery模板中的二維列表

回答

相關問題