CLNDR.js & Underscore.js 模板问题

Question

我正在使用 CLNDR.js 插件创建一个漂亮的迷你日历。我需要能够访问 day 函数内的 event 函数中的值。让我尝试在下面解释一下：

这是我填充日历的 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>

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

您可以在那些代码中看到我试图在 day 函数中使用 event.class。有没有办法做到这一点？您可以在上面的代码中看到 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 分隔符，正如他们的网站所说：

If ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML-escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string. You may define or omit any combination of the three. For example, to perform Mustache.js-style templating:
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

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

来源：http://underscorejs.org/

Answer 2

看来你需要循环遍历days变量，然后有一个events键。使用这个你可以访问类.

<%
    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 & Underscore.js 模板问题

CLNDR.js & Underscore.js templating issue

javascript

jquery

underscore.js

underscore.js-templating