Question

我在使用Jquery模板时遇到了一些麻烦，似乎无法弄清楚出了什么问题。这可能是我在每个内部使用每个内容的方式（找不到任何好的例子如何做到这一点）。

运行.tmpl函数时出现错误。

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

并说：

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

Answer 1

我自己修好了。我怀疑我写错了模板。这是正确的方法：

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

Jquery模板中的二维列表

1 个答案: