Jquery Template里面的二维列表答案

【问题标题】：Two-dimensional list inside Jquery TemplateJquery Template里面的二维列表
【发布时间】：2011-11-29 20:28:27
【问题描述】：

我在使用 Jquery 模板时遇到了一些问题，并且似乎无法找出问题所在。这可能是我在 each 中使用 each 的方式（找不到任何好的示例如何做到这一点）。

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

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

然后说：

未捕获的 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" : ""
        }
      ] }
] }

【问题讨论】：

很高兴您自己解决了这个问题！如果您可以将问题恢复到原始状态并将您的解决方案作为答案发布，那就太棒了。这样，面临类似问题的人可能会从您学到的东西中受益。
在 8 小时过去之前无法回答我自己的问题。那我会考虑做的。

标签： jquery json jquery-templates

【解决方案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>

【讨论】：