skygate2012 Ответов: 1

Clndr.js -загрузка данных json


Всем привет, я пытаюсь загрузить внешние данные из JSON-файла в CLNDR.js. хотя файл json был успешно загружен, календарь почему-то не реагирует на загруженные данные. Интересно, есть ли что-то не так с форматом json?
Ниже приведен оригинальный код на CLNDR (site.js):

var clndr = {};

$( function() {

  // PARDON ME while I do a little magic to keep these events relevant for the rest of time...
  var currentMonth = moment().format('YYYY-MM');
  var nextMonth    = moment().add('month', 1).format('YYYY-MM');

  var events = [
    { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
    { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
    { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
    { date: nextMonth + '-' + '07',    title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
  ];

  clndr = $('#full-clndr').clndr({
    template: $('#full-clndr-template').html(),
    events: events,
    forceSixRows: true
  });

  $('#mini-clndr').clndr({
    template: $('#mini-clndr-template').html(),
    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
  });

  $('#clndr-3').clndr({
    template: $('#clndr-3-template').html(),
    events: events,
    showAdjacentMonths: false
  });

  // $('#clndr-4').clndr({
  //   template: $('#clndr-4-template').html(),
  //   events: events,
  //   lengthOfTime: {
  //     days: 7,
  //     interval: 7
  //   }
  // });
});


Что я уже пробовал:

Мой отредактированный код:
var clndr = {};

$( function() {

  var json;

  $.getJSON('events.json', function (data) {
      json = data;
  })
  .error(function() {
      console.log('%cerror: Cannot load JSON data', 'color:red'); 
  })
  .done(function() {
      console.log('%cSuccessfully loaded JSON data', 'color:green');
  console.log(json);
  });

  $('#mini-clndr').clndr({
    template: $('#mini-clndr-template').html(),
    events: json,
    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
  });
});

Соответствующий файл json:
[
  {
    "date": "8-1-2017",
    "title": "Test",
    "location": "Nowhere"
  },
  {
    "date": "8-2-2017",
    "title": "Cat Frisbee",
    "location": "Jefferson Park"
  }
]

Живой сайт:
CLNDR[^]

1 Ответов

Рейтинг:
12

Richard Deeming

$.getJSON делает AJAX-запрос для файла. Первая буква " А "означает " асинхронный"; метод возвращает до запрос завершен.

Это означает, что когда вы выполняете $('#mini-clndr').clndr({ ... }); линия, JSON еще не загрузился. Ваш json переменная все равно будет undefined, так что не будет никаких событий для отображения.

Вам необходимо обновить события из done метод обратного вызова:
Возврат экземпляра / публичного API[^]

$( function() {
    $('#mini-clndr').clndr({
        template: $('#mini-clndr-template').html(),
        events: [], // Start with no events
        clickEvents: {
          ...
        },
        adjacentDaysChangeMonth: true,
        forceSixRows: true
    });
    
    $.getJSON('events.json').error(function() {
        console.error('%cerror: Cannot load JSON data', 'color:red'); 
    }).done(function(data){
        console.debug('%cSuccessfully loaded JSON data', 'color:green');
        console.debug(data);
        
        $('#mini-clndr').clndr().setEvents(data);
    });
});