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();
(...)

Answer 2

这是一个可能的策略：

让 'event' 成为用户刚刚选择的日期的事件。
假设此事件在 eventsThisMonth 数组中有对应的元素。
通过将每个元素的日期与所选日期进行比较，找到它在该数组中的索引。
现在使用下划线或 jQuery 隐藏 eventsContainer 中的每个条目，除了该索引的条目。

以及一个可能的实现（未测试）：

$(window).load(function(){

// Get a  reference to the calendar instance
var clndrCalendar = $('#mini-clndr').clndr({
        template: $('#calendar').html(),
        events: events,

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

                    var selectedDate = target.date;  // 'Moment' object from moment.js
                    var eventsThisMonth = clndrCalendar.eventsThisMonth;
                    var found = false;               // boolean - Do we have a match
                    for(var index = 0; index < eventsThisMonth.length; index++) {
                        // Compares the two dates using moment.js 'sameAs' method - http://momentjs.com/docs/#/query/is-same/
                        if(selectedDate.sameAs(eventsThisMonth[index].date)) {
                            found = true;
                            break;
                        }
                    }
                    if(found) {
                        var jqEvents = $('#mini-clndr .events .event');
                        var jqSelectedEvent = jqEvents.get(index);
                        if(jqSelectedEvent) {
                            jqEvents.hide();
                            jqSelectedEvent.show();
                        }
                    }

                    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

    });
});

CLNDR.js 将变量传递给 underscore.js

CLNDR.js pass variable into underscore.js

javascript

jquery

underscore.js