Question

我用CLNDR.js创建了一个日历。一切都运作良好，但我想将所选日期传递给下划线，仅显示事件日。

我的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数组中有相应的元素。
通过将每个元素的日期与所选日期进行比较，在该数组中查找其索引。
现在使用Underscore或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

2 个答案: