更新日程页面

2020/x/biz/css/base-ghh.css

@@ -116,6 +116,10 @@ body {
  content: none;
}
.common-list-last-clear > ul > li:last-child .ipu-list-item-inner:after {
  content: none;
}
.common-list-padding .ipu-list-item-inner {
  padding-top: .15rem;
  padding-bottom: .15rem;
@@ -1297,6 +1301,7 @@ body {
/* 日程 */
.calendar-month-title {
  margin-top: .15rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
@@ -1306,6 +1311,7 @@ body {
.calendar-month-table-body {
  box-shadow: 0rem 0rem 0.06rem 0rem rgba(1, 2, 32, 0.15);
  overflow: auto;
}
.calendar-month-table-head .table-th {
@@ -1324,6 +1330,7 @@ body {
  border-bottom: 1px solid #eee;
  float: left;
  width: 14.2857%;
  position: relative;
}
.calendar-month-table-body .table-td + .table-td {
@@ -1356,10 +1363,6 @@ body {
  padding-left: .1rem;
}
.month-day-schedule-item + .month-day-schedule-item {
  padding-top: .02rem;
}
.month-day-schedule-item:before {
  content: "";
  position: absolute;
@@ -1395,24 +1398,24 @@ body {
  color: rgba(255, 196, 68, 1);
}
.calendar-month-table-body .month-day-other .num {
.calendar-month-table-body .othermonthday .num {
  color: rgba(0, 0, 0, .45);
}
.calendar-month-table-body .month-day-num {
  padding: .05rem 0 .04rem;
  padding: .04rem 0 .03rem;
}
.calendar-month-table-body .slt-day .month-day-num {
.calendar-month-table-body .today .month-day-num {
  background-color: #2E8EFF;
}
.calendar-month-table-body .slt-day .num,
.calendar-month-table-body .slt-day .old-num {
.calendar-month-table-body .today .num,
.calendar-month-table-body .today .old-num {
  color: #fff;
}
.calendar-month-table-body .slt-day .month-day-schedule-list {
.calendar-month-table-body .today .month-day-schedule-list {
  background-color: rgba(46, 142, 255, 0.12);
}
@@ -1628,6 +1631,7 @@ body {
}
.schedule-item-flag {
  margin-top: .06rem;
  width: 0.08rem;
  height: 0.08rem;
  background: rgba(110, 177, 255, 1);
@@ -1651,4 +1655,99 @@ body {
.day-schedule-list {
  margin-top: .1rem;
}
.month-day-over {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(222, 222, 222, 0.52);
  z-index: 11;
  display: none;
}
.table-td.current .month-day-over {
  display: block;
}
.month-day-over .ipu-flex-middle-center {
  height: 100%;
}
.month-day-over .icon {
  font-size: .14rem;
  color: #B1B1B1;
}
.month-day-schedule-list-all {
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
  z-index: 110;
  display: none;
}
.month-day-schedule-list-all .ipu-list {
  padding: .1rem 0;
  width: 3.5rem;
  max-height: 2.9rem;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0rem 0rem 0.06rem 0rem rgba(1, 2, 32, 0.15);
  border-radius: .06rem;
  overflow: auto;
}
.month-day-schedule-list-all .ipu-list-item-inner {
  padding-top: .05rem;
  padding-bottom: .05rem;
}
.month-day-schedule-list-all .item-flag {
  width: 0.12rem;
  height: 0.12rem;
  background: rgba(30, 186, 171, 1);
  border-radius: 50%;
  margin-right: .1rem;
  margin-top: .09rem;
}
.month-day-schedule-list-all .item-title {
  font-size: 0.14rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 0.2rem;
}
.month-day-schedule-list-all .item-time {
  margin-top: .02rem;
  font-size: 0.12rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 0.17rem;
}
.month-day-schedule-list-all .arrow-flag {
  position: absolute;
  border-left: .08rem solid transparent;
  border-right: .08rem solid transparent;
  border-top: 0 none;
  border-bottom: .1rem solid #fff;
  z-index: 11;
  top: -.07rem;
  left: 2.5rem;
}
.month-day-schedule-list-all .arrow-flag-down {
  border-bottom: 0 none;
  border-top: .1rem solid #fff;
  bottom: -.07rem;
  top: auto;
}
.month-day-schedule-item-more {
  color: rgba(0, 0, 0, .45);
}

2020/x/biz/js/page/schedule.js

@@ -1,7 +1,7 @@
require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, calendar, artTemplate) {
  // todo: 月没有切换
  // todo: 日没有切换，日没有更新当前时间，日不能加载日程安排
  // todo: 月，日程超过问题？(出现滚动)
  // todo: 日没有切换
  // todo: 日，月切换时间未关联
  $.sizeReady(function () {
    // 共享变量
@@ -14,6 +14,7 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
    function init() {
      chooseMonthDays = getMonthScheduleList();   // 获取选中月日程信息
      initToday();
      initDayPage();
      initMonthPage();
    }
@@ -31,17 +32,13 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
    // 绑定页面事件
    function bindEvent() {
      // 日，上下收起与展开
      $(".calendar-day-more .icon-flag").click(function () {
        $(".calendar-item").toggleClass("open");
      });
      // 新建日程
      $(".schedule-add").click(function () {
        location.href = "schedule-add.html";
      });
      // 日月显示切换
      // 日月显示切换，需要关联日，月的时间，比如在日界面选中2020-05-04，切换到月，则默认2020-05月，仍选中当前日期
      $(".switch-option-wrap .switch-option").click(function () {
        if (!$(this).hasClass("on")) {
          $(this).addClass("on").siblings(".on").removeClass("on");
@@ -61,16 +58,77 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
            $(".calendar-day-table-body .table-tr.sltrow").removeClass("sltrow");
            $(this).parents(".table-tr").addClass("sltrow");
          }
          loadDayData();  // 加载对应天数据
        }
      });
      // 月日程切换
      $(".calendar-month-table-body").on("click", ".table-td", function () {
        if (!$(".month-day", this).hasClass("slt-day")) { // 当前日期不是选中的
          $(".table-td .month-day.slt-day").removeClass("slt-day");
          $(".month-day", this).addClass("slt-day");
      // 月日程切换，无须处理，选中日期没有特效显示效果
      // 点击月中某天，显示详情列表
      $(".calendar-month-table-body").on("click", ".month-day", function () {
        $(".calendar-month-table-body .table-td.current").removeClass("current");
        $(".month-day-schedule-list-all").hide();
        $(this).parents(".table-td").addClass("current");
        $(".month-day.sltday").removeClass("sltday");
        $(this).addClass("sltday");
        var data = $(this).data("scheduleList");  // 取缓存数据
        if (data) {  // 判断有详情列表数据
          var htmlStr = artTemplate("schedule-month-list-tpl", {list: data.event});
          $(".month-day-schedule-list-all").show().find("ul").html(htmlStr);
          var offset = $(this).offset();
          var listHeight = $(".month-day-schedule-list-all").innerHeight();
          var winHeight = $(window).innerHeight();
          var toolbarHeight = $(".ipu-toolbar").innerHeight();
          $(".month-day-schedule-list-all .arrow-flag").css("left", offset.left + $(this).innerWidth() / 2);
          var topPosition = offset.top + $(this).innerHeight();
          if (winHeight - topPosition > listHeight) {  // 放置在上面不够，放置在日历下面
            $(".month-day-schedule-list-all").css("top", topPosition - toolbarHeight);
            $(".arrow-flag-up").show();
            $(".arrow-flag-down").hide();
          } else {
            $(".month-day-schedule-list-all").css("top", offset.top - listHeight - toolbarHeight);
            $(".arrow-flag-up").hide();
            $(".arrow-flag-down").show();
          }
        }
      });
      // 任何点击先隐藏弹出的月详情列表，除非在点在列表上
      $("body").on("touchstart", function (e) {
        var target = e.target;
        if ($(".month-day-schedule-list-all").find(target).size() == 0) {
          $(".calendar-month-table-body .table-td.current").removeClass("current");
          $(".month-day-schedule-list-all").hide();
        }
      });
      // 月进入详情
      $(".month-day-schedule-list-all").on("click", ".ipu-list-item", function () {
        location.href = "schedule-detail.html";
      });
      // 日界面进入详情页
      $(".day-schedule-list").on("click", ".ipu-list-item", function () {
        location.href = "schedule-detail.html";
      });
      // 新建日程
      $(".schedule-add").click(function () {
        location.href = "schedule-add.html";
      });
    }
    // 数字转化为两位数字符串
    function toStdNum(num) {
      return (num > 0 && num < 10 ? "0" : "") + num;
    }
    // 转换为日历信息
@@ -84,6 +142,7 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
      }
      day.num = numText;
      day.oldNum = oldNumText;
      day.dateStr = year + toStdNum(month + 1) + toStdNum(date);    // 当前天日期，如2020-05-12
      day.className = "";
      if (month != chooseDate.month) {
@@ -99,7 +158,6 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
      if (year == chooseDate.year && month == chooseDate.month && date == chooseDate.date) {
        day.className += " sltday";
      }
      return day;
    }
@@ -125,14 +183,13 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
        }
      }
      for (i = 0; i < monthDayNum; i++) {
      for (i = 1; i <= monthDayNum; i++) {
        tempDay = new Date(year, month, i);
        tempDay = toCalendarDay(year, tempDay.getMonth(), tempDay.getDate());
        monthDays.push(tempDay);
      }
      // 最后一天不是周六，补充下月数据
      // 最后一天不是周六，补充下月N天
      if (monthLastDay != 6) {
        for (i = 1; i < 7 - monthLastDay; i++) {
          tempDay = new Date(year, month + 1, i);
@@ -144,13 +201,16 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
      return monthDays;
    }
    // 初始化日界面
    function initDayPage() {
    // 初始化今天信息
    function initToday() {
      var dayText = ['日', '一', '二', '三', '四', '五', '六'];
      var dateStr = (today.month + 1) + "月" + today.date + "日" + "<span class='day'>周" + dayText[today.day] + "</span>";
      $(".date-choose").html(dateStr);
    }
      // 再根据周信息，进行一次封装
    // 初始化日界面
    function initDayPage() {
      // 再根据周情况，进行一次数据封装
      var weekDayList = [];
      for (var i = 0; i < chooseMonthDays.length - 1; i = i + 7) {
        var array = [chooseMonthDays[i], chooseMonthDays[i + 1], chooseMonthDays[i + 2], chooseMonthDays[i + 3],
@@ -161,62 +221,64 @@ require(['jquery', 'ipuUI', 'calendar', 'artTemplate'], function ($, ipuUI, cale
      var dayHtmlStr = artTemplate('schedule-day-tpl', {data: weekDayList});
      $(".calendar-day-table-body").html(dayHtmlStr);
      $(".calendar-day-table-body .sltday").parents(".table-tr").addClass("sltrow");  // 标记为当前选择行
      // 查询当天数据，更新选中天数据
      loadDayData();
    }
    // 初始化月界面
    function initMonthPage() { // 获取当前年，月，
      var monthDteStr = (today.year) + "年" + (today.month + 1) + "月";
      var monthDteStr = (chooseDate.year) + "年" + (chooseDate.month + 1) + "月";
      $(".calendar-month-title").html(monthDteStr);
      // 需要将后端查询的日程数据在和日历数组进行合并，下面模拟部分测试数据
      var scheduleData = new Array(chooseMonthDays.length);
      var dayHtmlStr = artTemplate('schedule-month-tpl', {data: chooseMonthDays});
      $(".calendar-month-table-body").html(dayHtmlStr);
      scheduleData[4] = {
        event: [{title: '交周报'}, {title: '部门例会'}]
      };
      // 查询当月数据
      loadMonthData();
    }
      scheduleData[7] = {
        event: [{title: '交周报'}, {title: '部门例会'}],
        workday: true   // 工作日
      };
    // 加载天数据
    function loadDayData() {
      // 加载数据，更新日期
      console.log('update day data');
    }
      scheduleData[8] = {
    // 加载月数据
    function loadMonthData() {
      // 假设生成第4，7，8天数据
      var data = [{
        date: chooseMonthDays[4].dateStr,
        event: [{title: '交周报', time: '下午2:00-3:00'}, {title: '部门例会', time: '下午2:00-3:00'}]
      }, {
        date: chooseMonthDays[7].dateStr,
        event: [{
          title: '交周报', time: '下午2:00-3:00'
        }, {
          title: '部门例会', time: '下午2:00-3:00'
        }, {
          title: '部门例会', time: '下午2:00-3:00'
        }, {
          title: '部门例会', time: '下午2:00-3:00'
        }, {
          title: '部门例会', time: '下午2:00-3:00'
        }, {
          title: '部门例会', time: '下午2:00-3:00'
        }],
        workday: true   // 工作日
      }, {
        date: chooseMonthDays[8].dateStr,
        holiday: true   // 休息日
      };
      var htmlStr = "";
      $.each(chooseMonthDays, function (index, day) {
        var dayData = scheduleData[index] || {};
        var numText = day.cDay;
        var oldNumText = day.festival || day.Term || day.IDayCn;    // 显示优先：节日、节气、农历
        if (oldNumText == day.IDayCn && day.lDay == 1) {    // 初一若不是节日，则显示成X月
          oldNumText = day.IMonthCn;
        }
        var otherMonthDay = day.otherMonth ? 'month-day-other' : '';
        var sltDay = day.sltDay ? 'slt-day' : '';
        var eventStr = "";
        if (dayData.event) {
          $.each(dayData.event, function (i, obj) {
            eventStr += '<div class="month-day-schedule-item">' + obj.title + ' </div>';
          });
        }
        htmlStr += '<div class="table-td">'
          + '<div class="ipu-flex ipu-flex-vertical month-day ' + otherMonthDay + sltDay + '">'
          + '<div class="ipu-flex-grow-0 ipu-flex-center-middle month-day-num">'
          + '<span class="num">' + numText + '</span>'
          + '<span class="old-num">' + oldNumText + '</span>'
          + '</div>'
          + '<div class="ipu-flex-grow-1 month-day-schedule-list">' + eventStr + '</div>'
          + (dayData.workday ? '<div class="flag-workday">班</div>' : '')
          + (dayData.holiday ? '<div class="flag-holiday">休</div>' : '')
          + '</div>'
          + '</div>';
      }, {
        date: chooseMonthDays[35].dateStr,
        event: [{title: '交周报', time: '下午2:00-3:00'}, {title: '部门例会', time: '下午2:00-3:00'}]
      },];
      $.each(data, function (index, obj) {
        var htmlStr = artTemplate("schedule-month-tpl-child", {item: obj});
        $(".month-day-" + obj.date).append(htmlStr).data("scheduleList", obj);
      });
      $(".calendar-month-table-body").html(htmlStr);
    }
  });
});

2020/x/ipu/ui/js/ipuUI.js

@@ -4207,5 +4207,3 @@
  }
})();
//# sourceMappingURL=ipuUI.js.map

2020/x/schedule.html

@@ -20,13 +20,12 @@
  <div class="ipu-flex-col ipu-fn-bd-b">
    <header class="ipu-toolbar">
      <h1 class="ipu-toolbar-title">日程</h1>
      <!--
      待增加相关设置页面后，开放
      <a class="ipu-fn-left head-icon-config" href="javascript:;">
        <i class="ipu-icon ri-settings-4-line"></i>
      </a>
      -->
      <div class="ipu-fn-right">
        <div class="switch-time ipu-flex-middle-center">
@@ -36,89 +35,30 @@
          </div>
        </div>
      </div>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ">
    <!-- 日程的日展现形式  -->
    <div class="ipu-flex-content common-bg-white calendar-item calendar-item-day ">
    <div class="ipu-flex-content common-bg-white calendar-item calendar-item-day on">
      <div class="ipu-flex-row ipu-flex-vertical">
        <div class="ipu-flex-col">
          <div class="common-bg-white">
            <div class="calendar-day-table">
              <div class="calendar-day-table-head">
                <div class="common-flex-tiled table-tr">
                  <div class="table-th">
                    日
                  </div>
                  <div class="table-th">
                    一
                  </div>
                  <div class="table-th">
                    二
                  </div>
                  <div class="table-th">
                    三
                  </div>
                  <div class="table-th">
                    四
                  </div>
                  <div class="table-th">
                    五
                  </div>
                  <div class="table-th">
                    六
                  </div>
                  <div class="table-th">日</div>
                  <div class="table-th">一</div>
                  <div class="table-th">二</div>
                  <div class="table-th">三</div>
                  <div class="table-th">四</div>
                  <div class="table-th">五</div>
                  <div class="table-th">六</div>
                </div>
              </div>
              <div class="calendar-day-table-body">
                <!--
                <div class="common-flex-tiled table-tr">
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                  <div class="table-td">
                    <div class="day">
                      <div class="num"></div>
                      <div class="old-num"></div>
                    </div>
                  </div>
                </div>
                -->
              </div>
            </div>
@@ -127,17 +67,15 @@
              <i class="icon-flag ri-arrow-up-s-line"></i>
            </div>
          </div>
          <div class="date-choose">
          </div>
          <div class="date-choose"></div>
        </div>
        <div class="ipu-flex-col ipu-flex-col-auto">
          <div class="ipu-list ipu-list-media common-list day-schedule-list">
            <ul>
              <li class="">
                <a class="ipu-list-item">
                  <div class="ipu-list-item-media">
                <a class="ipu-list-item ">
                  <div class="ipu-list-item-media ipu-flex-align-start">
                    <div class="schedule-item-flag"></div>
                  </div>
                  <div class="ipu-list-item-inner">
@@ -153,8 +91,8 @@
                </a>
              </li>
              <li class="">
                <a class="ipu-list-item">
                  <div class="ipu-list-item-media">
                <a class="ipu-list-item ">
                  <div class="ipu-list-item-media ipu-flex-align-start">
                    <div class="schedule-item-flag"></div>
                  </div>
                  <div class="ipu-list-item-inner">
@@ -172,7 +110,7 @@
              <li class="">
                <a class="ipu-list-item">
                  <div class="ipu-list-item-media">
                  <div class="ipu-list-item-media ipu-flex-align-start">
                    <div class="schedule-item-flag"></div>
                  </div>
                  <div class="ipu-list-item-inner">
@@ -190,7 +128,7 @@
              <li class="">
                <a class="ipu-list-item">
                  <div class="ipu-list-item-media">
                  <div class="ipu-list-item-media ipu-flex-align-start">
                    <div class="schedule-item-flag"></div>
                  </div>
                  <div class="ipu-list-item-inner">
@@ -208,7 +146,7 @@
              <li class="">
                <a class="ipu-list-item">
                  <div class="ipu-list-item-media">
                  <div class="ipu-list-item-media ipu-flex-align-start">
                    <div class="schedule-item-flag"></div>
                  </div>
                  <div class="ipu-list-item-inner">
@@ -225,7 +163,7 @@
              </li>
              <li class="">
                <a class="ipu-list-item">
                  <div class="ipu-list-item-media">
                  <div class="ipu-list-item-media ipu-flex-align-start">
                    <div class="schedule-item-flag"></div>
                  </div>
                  <div class="ipu-list-item-inner">
@@ -250,12 +188,11 @@
    </div>
    <!-- 日程的月展现形式  -->
    <div class="ipu-flex-content common-bg-white calendar-item calendar-item-month on">
    <div class="ipu-flex-content common-bg-white calendar-item calendar-item-month ">
      <div class="calendar-month-title">
        2020年4月
      </div>
      <div class="calendar-month-table">
        <div class="calendar-month-table-head">
          <div class="common-flex-tiled table-tr">
@@ -287,13 +224,22 @@
        </div>
      </div>
      <!-- 月列表全 -->
      <div class="month-day-schedule-list-all">
        <div class="arrow-flag arrow-flag-up"></div>
        <div class="arrow-flag arrow-flag-down"></div>
        <div class="ipu-list common-list common-list-last-clear">
          <ul></ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="schedule-day-tpl">
  {{ each data list dataindex }}
  <div class="common-flex-tiled table-tr">
@@ -308,18 +254,71 @@
  </div>
  {{/each}}
</script>
<script type="text/html" id="month-tpl">
  <div class="table-td">'
    <div class="ipu-flex ipu-flex-vertical month-day ' + otherMonthDay + sltDay + '">
<!-- 月界面，日历列表 -->
<script type="text/html" id="schedule-month-tpl">
  {{ each data item }}
  <div class="table-td">
    <div class="ipu-flex ipu-flex-vertical month-day {{item.className}} month-day-{{item.dateStr}}">
      <div class="ipu-flex-grow-0 ipu-flex-center-middle month-day-num">
        <span class="num">' + numText + '</span>
        <span class="old-num">' + oldNumText + '</span>
        </div>'
      <div class="ipu-flex-grow-1 month-day-schedule-list">' + eventStr + '</div>
      (dayData.workday ? '<div class="flag-workday">班</div>' : '')
      (dayData.holiday ? '<div class="flag-holiday">休</div>' : '')
      </div>'
  </div>'
        <span class="num">{{item.num}}</span>
        <span class="old-num">{{item.oldNum}}</span>
      </div>
    </div>
  </div>
  {{/each}}
</script>
<!-- 月界面，日期后台数据模板 -->
<script type="text/html" id="schedule-month-tpl-child">
  {{set event = item.event}}
  {{if event && event.length != 0 }}
  <div class="month-day-over">
    <div class="ipu-flex-middle-center">
      <i class="icon ri-close-line"></i>
    </div>
  </div>
  <div class="ipu-flex-grow-1 month-day-schedule-list">
    {{each event ev index}}
    {{if index < 4 || index == 4 && event.length == 5 }}
    <div class="month-day-schedule-item ipu-fn-row">{{ev.title}}</div>
    {{else if index == 4 && event.length > 5 }}
    <div class="month-day-schedule-item month-day-schedule-item-more ipu-fn-row">还有{{event.length-4}}项...</div>
    {{else}}
    <!-- 不显示　-->
    {{/if}}
    {{/each}}
    {{/if}}
  </div>
  {{if item.workday}}
  <div class="flag-workday">班</div>
  {{/if}}
  {{if item.holiday}}
  <div class="flag-holiday">休</div>
  {{/if}}
</script>
<!-- 月界面，日程列表全 -->
<script type="text/html" id="schedule-month-list-tpl">
  {{ each list item}}
  <li class="ipu-list-item ipu-flex-align-start">
    <div class="item-flag">
    </div>
    <div class="ipu-list-item-inner">
      <div class="ipu-flex ipu-flex-vertical">
        <div class="item-title">{{item.title}}</div>
        <div class="item-time">{{item.time}}</div>
      </div>
    </div>
  </li>
  {{/each}}
</script>
</body>
</html>