Two-dimensional list inside Jquery Template_问答_开发者

Im having some trouble with Jquery Templates and can't seem to figure out what's wrong. It's probally the way I'm using an each inside an each (Couldn't find any good examples how to do this).

The error appers when running the .tmpl function.

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

and says:

Uncaught SyntaxError: Unexpected identifier at Line 1 of jquery.tmpl.min.js

Here's the template:

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

And here's the 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",
开发者_JAVA技巧          "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" : ""
        }
      ] }
] }

Fixed it myself. As I suspected I had written the template wrong. Here's the correct way:

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