Question

我真的可以在这里使用一些帮助。关于让这个日历业务结束但只是去测试IE中的所有内容，下划线JS模板没有获得日历的第一个“行”事件数据。

如果你在Chrome上运行那个小提琴它（虽然大小有点难看）会在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日）的days数组实际上并没有当天的“事件”对象。它根本就不存在。所以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

PrND给CLNDR的创造者＆＃34; kylestetz＆＃34;在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循环现在以正确的日期格式添加事件。

更新了小提琴：http://jsfiddle.net/y072a94e/4/

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

1 个答案: