javascript - CLNDR.js 和 Underscore.js 模板问题

Question

我正在使用 CLNDR.js 插件创建一个漂亮的迷你日历。我需要能够访问 event 中的值day 内的函数功能。让我尝试在下面解释一下:

这是我填充日历的 JS 代码。您会在我的 JSON 中看到我正在尝试添加 class: 'bank-holiday'属性数组。

<script>
    var clndr = {};

    $( function() {

        var currentMonth = moment().format('YYYY-MM');
        var nextMonth    = moment().add(1,'month').format('YYYY-MM');

        var events = [
            <?php
            //Loop bank holiday dates from gov.uk website
            $events = json_decode($englandAndWalesEvents);
            foreach($events as $event){
                echo "{ date: '".$event->date."', title: '".$event->title."', url: 'https://www.gov.uk/bank-holidays', class: 'bank-holiday' },";
            }
            ?>
        ];

        $('#mini-clndr').clndr({
            template: $('#mini-clndr-template').html(),
            weekOffset: 1,
            events: events,
            clickEvents: {
                click: function(target) {
                    if(target.events.length) {
                        var daysContainer = $('#mini-clndr').find('.days-container');
                        daysContainer.toggleClass('show-events', true);
                        $('#mini-clndr').find('.x-button').click( function() {
                            daysContainer.toggleClass('show-events', false);
                        });
                    }
                }
            },
            adjacentDaysChangeMonth: true,
            forceSixRows: true
        });
    });
</script>

下面是我的 underscore.js 模板，用于填充我的日历:

<div class="days-container">
    <div class="days">
        <div class="headers">
            <% _.each(daysOfTheWeek, function(day) { %><div class="day-header"><%= day %></div><% }); %>
        </div>
        <% _.each(days, function(day) { %><div class="<%= event.class %> <%= day.classes %>" id="<%= day.id %>"><%= day.day %></div><% }); %>
    </div>
    <div class="events">
        <div class="headers">
            <div class="x-button">x</div>
            <div class="event-header">EVENTS</div>
        </div>
        <div class="events-list">
            <% _.each(eventsThisMonth, function(event) { %>
            <div class="event">
                <a target="blank" href="<%= event.url %>"><%= moment(event.date).format('MMMM Do') %>: <%= event.title %></a>
            </div>
            <% }); %>
        </div>
    </div>
</div>

您可以在这些代码中看到我正在尝试利用 event.class里面day功能。有没有办法做到这一点？您可以在上面的代码中看到event函数用于显示event.url event.title等等

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

预先感谢您对此提供的任何帮助，

安迪

Answer 1

看起来你需要循环遍历days变量，然后有一个events键。使用它您可以访问这些类。

<%
    var classes = '';
    if( day.events.length ){
        for( var i = 0; i < day.events.length; i++ ){
            classes += ' ' + day.events[i].class;
        }
    }
%>


<div class="<%= day.classes %><%= classes %>" id="<%= day.id %>"><%= day.day %></div>