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>

下面是填充我的日历的undercore.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

您可以更改underscore.js分隔符，因为它表示它们的网站：

如果ERB风格的分隔符不是你的一杯茶，你可以改变下划线的模板设置使用不同的符号来设置内插代码。定义插值正则表达式以匹配表达式应该逐字插入，匹配的逃避正则表达式应该在HTML转义后插入的表达式，以及评估正则表达式以匹配应该在没有评估的表达式插入到结果字符串中。您可以定义或省略任何三者的结合。例如，执行Mustache.js样式模板：
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

来源：http://underscorejs.org/

Answer 2

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

<%
    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>

CLNDR.js＆amp; Underscore.js模板问题

2 个答案: