fullcalendar-невозможно кэшировать ответ JSON из AJAX-вызова


Я следую за этим вопросом Fullcalendar JSON Feed Caching

Я пытаюсь сделать нечто подобное. У меня есть полный календарь (только месячный просмотр включен, так что ленивая выборка не будет работать, я думаю). И в месячном представлении я показываю информацию о посещаемости пользователя. Поэтому, когда пользователь переходит в другой месяц (скажем, ноябрь), инициируется вызов AJAX, и он возвращает посещаемость за этот месяц, и если пользователь переходит в другой месяц( скажем, декабрь), посещаемость за этот месяц также принесенный.

Проблема в том, что когда пользователь снова возвращается в ноябрь, вызов AJAX вызывается снова. Так что мне нужно еще раз собрать данные. Я пытаюсь избежать этого, так как требуется 25 секунд, чтобы вычислить посещаемость и вернуть ответ JSON. Итак, я пытаюсь скрыть ответ.

Вот фрагмент JSON.

{  
   "attendance":[  
      {  
         "backgroundColor":"#f56954",
         "borderColor":"#f56954",
         "start":"2017-01-01",
         "end":"2017-01-01",
         "title":"Absent",
      },
      {  
         "backgroundColor":"#f56954",
         "borderColor":"#f56954",
         "start":"2017-01-02",
         "end":"2017-01-02",
         "title":"Absent",
      }
   ],
   "leaves":[  

   ]
}

Я последовал ответу, приведенному в этом вопросе, и сделал мои события кэширования, но это не работает. Я не знаю почему.

Вот мой полный календарь. код.

    /* initialize the calendar ----*/
    //Date for the calendar events (dummy data)
    var date = new Date();
    var d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear();
    var dateofMonth = y + '-' + m + '-' + d;
    var date = dateofMonth;
    var events = [];
    var eventsCache = {}; //for caching

    var today = moment();
    var todayDate = today.format("YYYY-MM-DD");
    var tomorrow = today.add(1, 'days').format("YYYY-MM-DD");
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'month'
      },
      buttonText: {
        today: 'today',
        month: 'month'
      },
      eventMouseover: function(data, event, view) {},
      events: function(start, end, timezone, callback) {

        //have we already cached this time?
        if (events.eventsCache && events.eventsCache[start.toString + "-" + end.toString]) {

          //if we already have this data, pass it to callback()
          callback(eventsCache[start.toString + "-" + end.toString]);
          return;
        }

        var date = $('#calendar').fullCalendar('getDate');
        dateofMonth = date._d;
        var post_url = "path_to_file.php";
        $.ajax({
          url: post_url,
          type: "POST",
          dataType: 'json',
          cache: true,
          data: {
            dateofMonth: dateofMonth,
            csrf_test_name: csrf_token
          },
          beforeSend: function(xhr) {},
          success: function(result) {
            var events = [];
            if (!events.eventsCache)
              events.eventsCache = {};

            //store your data
            eventsCache[start.toString + "-" + end.toString] = result;

            $.each(result.attendance, function(index, res) {
              var date = (res.start).split('-');
              events.push({

                title: res.title,
                allDay: true,

              });
            });

            callback(events);
          }
        });
      },
      editable: false,
      droppable: true, // this allows things to be dropped onto the calendar !!!
      eventClick: function(calEvent, jsEvent, view) {}
    });
1 4

1 ответ:

Кэширование на стороне клиента, безусловно, возможно, если вы реализовали его правильно. Но я вижу несколько проблем в вашем коде, которые мешают ему работать.

Имейте в виду, что вы уже созданы events и eventsCache в начале вашего кода.

var events = [];
var eventsCache = {};

Это не проблемы, так что оставь их себе.

Задача №1 состоит в следующем:

if (events.eventsCache && events.eventsCache[start.toString + "-" + end.toString]) {

Здесь вы проверяете объект, который всегда пуст, что означает, что код внутри if никогда не будет выполненный. Вам нужно изменить events.eventsCache на eventsCache, таким образом строка становится:

if (eventsCache[start.toString + "-" + end.toString]) {
Нет необходимости проверять существование eventsCache, потому что вы уже создали его.

Задача №2 является первой строкой в функции success():

var events = [];

Эта строка опустошает переменную events каждый раз, когда выполняется success(). Другими словами, вы опустошаете кэш, поэтому удалите его.

Задача №3 - это следующие две строки в той же функции:

if (!events.eventsCache)
  events.eventsCache = {};

Это создает объект, который никогда не используется, поэтому удалите и его. Вспомните, что вы уже создали eventsCache в начале кода и уже используете его. Нет необходимости создавать другой объект eventsCache.

Этого должно хватить.