Двумерный список внутри Jquery Template - PullRequest
Новая
       5

Двумерный список внутри Jquery Template

0 голосов
/ 03 октября 2011

У меня возникли проблемы с Jquery Templates и я не могу понять, что случилось.Вероятно, я использую каждый внутри каждого из них (не могу найти хороших примеров, как это сделать).

Ошибка возникает при запуске функции .tmpl. 

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

и говорит:

Uncaught SyntaxError: неожиданный идентификатор в строке 1 jquery.tmpl.min.js

Вот шаблон: 

<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" : ""
        }
      ] }
] }

1 Ответ

2 голосов
/ 04 октября 2011

Исправил это сам.Как я и подозревал, я написал шаблон неправильно.Вот правильный путь: 

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