Javascript CLNDR.js将变量传递到underline.js

我已经用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>

---

有人能帮我吗？这是我第一次使用下划线.js，我认为您的问题与下划线.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>
<% }); %>

---

以下是一种可能的策略：

让“事件”为用户刚刚选择的日期的事件

假设此事件在本月的

events

数组中有相应的元素

通过比较每个元素的日期和所选日期，在该数组中查找其索引

现在，使用下划线或jQuery隐藏

eventscocontainer

中的每个条目，但该索引的条目除外

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

$（窗口）.load（函数（）{
//获取对日历实例的引用
var clndrCalendar=$（'#mini clndr'）.clndr({
模板：$（“#日历”）.html（），
事件：事件，
单击事件：{
单击：功能（目标）{
if（target.events.length）{
var selectedDate=target.date；//Moment.js中的'Moment'对象
var eventsThisMonth=clndrCalendar.eventsThisMonth；
var found=false；//布尔值-我们有匹配项吗
对于（var index=0；index

谢谢你Pierre:）我对你的代码做了一点修改，但它与你的策略配合得很好：）我也尝试了你的策略。。。“日历”代表什么？脚本id？@FrancisB.Bélisle它只是一个变量，用于保存下面几行语句所需的对象引用：

var eventsthissmonth=clndrCalendar.eventsthissmonth。您可以随意重命名它，只要您同时重命名它的两个出现项。。
<% _.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>
<% }); %>

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

$(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

    });
});