Question

读取JSON文件并将数据放入DIV的jQuery脚本显示日期，但不显示位置，描述或链接。

这里有一个JSON集的例子：

{
"id": "6dq1oht32tdp66i9s2bd9a21lk@group.calendar.google.com",
"title": null,
"events": [{
      "start": {
        "date": null,
        "time": "2016-02-16T10:00:00+01:00"
      },
      "end": {
        "date": null,
        "time": "2016-02-16T11:00:00+01:00"
      },
      "location": "Kreuzberg, Berlin, Germany",
      "description": "Basketball Test",
      "color_id": "1",
      "ical_uid": "a5fq8vu8gur943bucj5ajr2mb4@google.com"
    }

这里有一个jQuery脚本：

<script type="text/javascript">

(function(window, $) {

    var CALENDAR_ENDPOINT ='http://antibang.com/js/berlinbraves/calendar/?tk=9832187dsamj__dsaj7321njdsa';

    var _leftCalendar, _rightCalendar;

    function _parseEvents(eEventData) {

        var converted, formatted;

        converted = [];

        eEventData.forEach(function(eItem) {

            formatted = moment(eItem.start.time);

            converted.push({

                date: formatted.format('YYYY-MM-DD'),

                formatted_date: formatted.format('DD.MM.YY'),
                formatted_time: formatted.format('HH:mm') + ' Uhr',

                location: eItem.location,
                description: eItem.description,
                link: eItem.ical_uid,
                category: eItem.color_id == null ? 'default' : eItem.color_id

            });

        });

        return converted;

    }


    function _prepareDays() {

        // hover over day cell

        $('.clndr-event').hover(function() {

            var $this;

            $this = $(this);

            $('#event-detail').show();

            $('#event-detail').removeClass();
            $('#event-detail').addClass('category-' + $this.data('category'));

            $('#event-detail-date').text($this.data('date'));
            $('#event-detail-loca').text($this.data('location'));

            $('#event-detail').css('top', Math.round($this.offset().top) );
            $('#event-detail').css('left', Math.round($this.offset().left) );



        }, function() {

            $('#event-detail').hide();

        });

    }

我看不出为什么Date会渲染，但是位置，描述和ical_uid不会？

正在使用的日历系统是CLNDR，此处的数据正在此处设置数据：

    <script type="text/template" id="template-calendar">

<div class="clndr-single">

    <div class="clndr-month"><%= month %> </div>
       <div class="clndr-year"><%= year %> </div>

    <div class="clndr-grid">

        <div class="days-of-the-week">

            <% _.each(daysOfTheWeek, function(day) { %>
                <div class="header-day"><%= day %></div>
            <% }); %>

            <div class="days">

                <% _.each(days, function(day) { %>

                    <div class="<%= day.classes %>">

                        <div class="clndr-day"><%= day.day %></div>

                        <div class="clndr-events">

                            <% _.each(day.events, function(event) { %>
                                <div class="clndr-event category-<%= event.category %>"
                                    data-description="<%= event.description %>"
                                    data-category="<%= event.category %>"
                                    data-time="<%= event.time %>"
                                    data-date="<%= event.date %>"
                                ></div>
                            <% }); %>

                        </div>


                    </div>

                <% }); %>

            </div>

        </div>

   </div>

</div>

Answer 1

尝试：

"autoload": {
    "psr-0": {
        "yourname\\yourpackage\\": ["src/"]
    }
}

的jsfiddle：https://jsfiddle.net/o1f62n4g/1/

Answer 2

HTML数据属性未正确设置，因此似乎没有用于放置信息的模板。模板（在顶部）修改后立即工作。

jQuery没有读取JSON实例

2 个答案: