CLNDR.js 不知何故没有将完整的 days.events 数据传递给模板？仅在 IE 中

Question

我真的需要一些帮助。即将完成此日历业务，但只是去测试 IE 中的所有内容，下划线 JS 模板未获取日历的第一个 "row" 事件数据。

这是我的fiddle：http://jsfiddle.net/y072a94e/3/

如果您运行在 Chrome 上 fiddle 它正确地显示了 3 月 2 日、4 日和 5 日的事件（尽管大小有点难看）。（每周总计也有一些有用的东西，并将它们加到第一行）。

然而，在 IE 上，这不起作用，但奇怪的是，3 月 10 日和 DO 上的事件出现了。

我在 IE 调试器中四处寻找，发现在我的 underscore.js 模板中的这个位置有一个断点：

 {% _.each(days, function(day) { %}
                {% debugger; %}
                <div class="{{ day.classes }}">{{ day.day }}

索引 1（3 月 2 日）处的天数数组实际上没有该日期的 "events" 对象。它根本不存在。所以不知何故 CLNDR.js 在将它传递给下划线之前从事件数组中取出前几个元素？我不确定如何解决这个问题。 =X

注意：我使用的是 IE10 和 Chrome 版本 41.0.2272.89 m

模板：

    <script type="text/javascript">
        //switch out delimiters for underscore
        _.templateSettings = {
            interpolate: /\{\{(.+?)\}\}/g,      // print value: {{ value_name }}
            evaluate: /\{%([\s\S]+?)%\}/g,   // excute code: {% code_to_execute %}
            escape: /\{%-([\s\S]+?)%\}/g
        }; // excape HTML: {%- <script> %} prints &lt;script&gt;
    </script>

<div id="full-clndr"></div>   

    <script id="clndrTemplate" type="text/template">
        {% 
            var weeklyTotals = 0;
            var weekTicker = 0; 
            var weeklyTotalsArray = [];
        %}
        <div class="clndr-controls">
          <div class="clndr-previous-button arrow"><span style="font-weight: bold; font-size: large; width: 50px; height: 50px; padding: 5px;"><</span></div>          
          <div class="clndr-next-button arrow"><span style="font-weight: bold; font-size: large; width: 50px; height: 50px; padding: 5px;">></span></div>
          <div class="month">{{ month }}</div>
        </div>
        <div class="clndr-grid">
          <div class="days-of-the-week">
            {% _.each(daysOfTheWeek, function(day) { %}
              <div class="header-day">{{ day }}</div>
            {% }); %}
            <div class="days">

              {% _.each(days, function(day) { %}

                <div class="{{ day.classes }}">{{ day.day }}

                <br />                   
                <div class="deposit">
                    {%if(day.events.length > 0){ %}                      
                        <a href="http://www.google.com" target="_blank">${{day.events[0].title}}</a>

                    {% if (weekTicker < 7){
                        weeklyTotals = weeklyTotals + Number(day.events[0].title);                         
                    } %}

                    {%}%}
                </div>
                                    {%
                weekTicker += 1;

                if(weekTicker == 7){                              
                    weeklyTotalsArray.push(weeklyTotals);    
                    weekTicker = 0; 
                    weeklyTotals = 0;
                }

                %}
                </div>
              {% }); %}
            </div>
          </div>
        </div> 
        <div class="event-listing">
            <p id="weeklyTotalsTitle" class="event-listing-title">Weekly Totals</p>

            {% _.each(weeklyTotalsArray, function(weeklyTotal) {  %}
            <div class="event-item"><span class="event-item-span">${{weeklyTotal}}</span></div>
            {% }); %}
        </div>                    
    </script>

JS:

var currentMonth = moment().format('YYYY-MM');
var nextMonth = moment().add('month', 1).format('YYYY-MM');
var deposits = {2 : 2514.76, 4 : 685.39, 5 : 1217.43, 10 : 1532.11, 11 : 884.32, 12 : 942.71, 16 : 3099.43, 18 : 433.21, 20 : 731.55, 24 : 2131.68}
var events = [            
];

for (var day in deposits) {
    events.push({ date: currentMonth + '-' + day, title: '' + deposits[day] })            
}
//Just adding this to show day in additional month shows up
events.push({ date: '2015-4-1', title: '5000' })

var calendar = $('#full-clndr').clndr({
    template: $("#clndrTemplate").html(),
    daysOfTheWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    numberOfRows: 5,
    showAdjacentMonths: true,
    adjacentDaysChangeMonth: false,
    constraints: {
        startDate: moment().subtract(15, 'months').format('YYYY-MM-DD')
    },
    events: events

});

Answer 1

支持 CLNDR "kylestetz" 的创建者回答我关于 GitHub 的问题：

https://github.com/kylestetz/CLNDR/issues/159#issuecomment-83527323

原来我需要确保我的日期格式符合 ISO 8601 标准

我改变了：

    var deposits = {2 : 2514.76, 4 : 685.39, 5 : 1217.43, 10 : 1532.11, 11 : 884.32, 12 : 942.71, 16 : 3099.43, 18 : 433.21, 20 : 731.55, 24 : 2131.68}

收件人：

    var deposits = {'02' : 2514.76, '04' : 685.39, '05' : 1217.43, '10' : 1532.11, '11' : 884.32, '12' : 942.71, '16' : 3099.43, '18' : 433.21, '20' : 731.55, '24' : 2131.68}

for each 循环现在以正确的日期格式添加事件。

已更新 fiddle：http://jsfiddle.net/y072a94e/4/

CLNDR.js 不知何故没有将完整的 days.events 数据传递给模板？仅在 IE 中

CLNDR.js somehow not passing full days.events data to template? ONLY in IE

jquery

internet-explorer

underscore.js