在日历功能中使用承诺响应（需要来自 ajax 调用的数据）

Question

承诺中的 Ajax 调用：

var promise = new Promise(function(resolve, reject) {
    jQuery.ajax({
            url:'<?php echo site_url();?>/MyController/ajax_cal',
            type:'POST',
            dataType: "JSON",
            success:function(results) {
                resolve(results); 
                //reject(Error(request.statusText)); // status is not 200 O K, so reject
            }
        });
  });

从承诺中回应

promise.then(function(data) {
      alert(data); // this is working fine BUT i want to use this in calendar function 

 }, function(error) {
    console.log('Promise rejected.');
    console.log(error.message);
  }); 

Calander javascript 代码：

<!-- Calander Module starts-->
    var calendar = $('#calendar').calendar({

        console.log(data); /// want to use the data from ajax call on promises 
        events_source: data  , // here 
        view: 'month',
        tmpl_path: '<?php echo base_url();?>asserts/bootstrap_calender/tmpls/',
        tmpl_cache: false,
        day: '2017-02-14',
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
}); 
(function($) {
$('.btn-group button[data-calendar-nav]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.navigate($this.data('calendar-nav'));
        });
    });

    $('.btn-group button[data-calendar-view]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.view($this.data('calendar-view'));
        });
    });

    $('#first_day').change(function(){
        var value = $(this).val();
        value = value.length ? parseInt(value) : null;
        calendar.setOptions({first_day: value});
        calendar.view();
    });

    $('#language').change(function(){
        calendar.setLanguage($(this).val());
        calendar.view();
    });

    $('#events-in-modal').change(function(){
        var val = $(this).is(':checked') ? $(this).val() : null;
        calendar.setOptions({modal: val});
    });
    $('#format-12-hours').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({format12: val});
        calendar.view();
    });
    $('#show_wbn').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({display_week_numbers: val});
        calendar.view();
    });
    $('#show_wb').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({weekbox: val});
        calendar.view();
    });
    $('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
        //e.preventDefault();
        //e.stopPropagation();
    });
}(jQuery));  
<!-- Calander Module ends-->

我想在“日历事件源字段”中获取动态数据（json 格式）。我使用了 ajax 调用，但我知道该变量在 ajax 调用之外是不可访问的。我比使用承诺比我成功地在 ajax 调用之外警告变量但我仍然无法在“日历事件源字段”中访问它。我不知道出了什么问题以及如何使用它。

Answer 1

解决此问题的一种方法是在获得数据后创建日历元素（在 then 块中）。我可能会这样做，以便我构建 UI，然后触发获取，然后在 then() 函数中，我会用接收到的事件调用 onAfterEventsLoad，因为它似乎构建了日历。