javascript - CLNDR.js 将变量传递到 underscore.js

Question

我使用 CLNDR.js 创建了一个日历。一切都运行良好，但我想将选定的日期传递到 Underscore 中以仅显示事件日期。

我的 clndr html 的一部分:

<div class="events-list">
    <% _.each(eventsThisMonth, function(event) { %>

        <!--<% if (event.date == selectedDate) { %>-->

            <div class="event">
                <a href="<%= event.url %>">. <%= event.location %></a>
            </div>

        <!--<% } %>-->

    <% }); %>
</div>

脚本:

$(window).load(function(){

$('#mini-clndr').clndr({
    template: $('#calendar').html(),
    events: events,

    clickEvents: {
        click: function(target) {
            if(target.events.length) {

                var selectedDate = target.date['_i'];

                var controls = $('#mini-clndr').find('.controls');                          
                var daysContainer = $('#mini-clndr').find('.days-container');
                var eventsContainer = $('#mini-clndr').find('.events');

                controls.slideUp( "slow" );
                daysContainer.slideUp( "slow" );
                eventsContainer.slideDown( "slow" );

                $('#mini-clndr').find('.x-button').click( function() {
                    controls.slideDown( "slow" );
                    daysContainer.slideDown( "slow" );
                    eventsContainer.slideUp( "slow" );
                });

            }

        }
    },

    adjacentDaysChangeMonth: false

  });
});

有人可以帮助我吗？这是我第一次使用Underscore.js

Answer 1

我认为您的问题与 underscore.js 无关

您不能在 clndr 模板中使用 selectedDate。此模板仅在渲染日历时使用(因此在开始时或调用渲染时)，而不是在单击事件上使用。

如果没有完整的 clndr 模板，就很难为您提供正确的代码。但也许类似的东西可以工作:

<% _.each(eventsThisMonth, function(event) { %>
    <div class="event-item <%= event.date %>">
        <div class="event-item-name"><%= event.title %></div>
        <div class="event-item-location"><%= event.location %></div>
    </div>
<% }); %>

在你的js中:

(...)
$(".events-list ." + selectedDate).show();
controls.slideUp( "slow" );
(...)
$('#mini-clndr').find('.x-button').click( function() {
    $(".events-list ." + selectedDate).hide();
(...)