jquery - 使用 KnockoutJS 加载日历事件

Question

我已经为这个问题苦苦挣扎了一段时间。我无法将事件绑定(bind)到我的完整日历。我不知道该怎么办。我读过很多关于绑定(bind)的文章，但没有成功。我没有收到任何错误，我的数据未加载。我的问题是我需要为我的事件创建自定义绑定(bind)吗？

View 模型

function CalendarVM() {
   this.calendarViewModel = ko.observable();
   this.viewDate = ko.observable(Date.now());


   // Observable functions
   this.LoadCalendar = function (events) {
    var self = this;
    //alert(self.calendarEvents().length);
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        theme: true,
        selectable: true,
        selectHelper: true,
        editable: true,
        viewDate: self.viewDate,
        defaultView: 'month',
        eventLimit: true, // allow "more" link when too many events
        select: function (start, end, allDay) {
            // Show modal
            $('#myModal').modal('show');

            self.SelectedDate(formatDate(start));

        },
        events: function (start, end, timezone, callback) {
            $.ajax({
                type: 'GET',
                url: '/Admin/GetCalendarEvents',
                dataType: 'json',
                contentType: 'application/json',
                success: function (result) {
                    var events = [];
                    if (result != undefined && result.length > 0) {

                        result.forEach(function (entry) {
                            var sDate = formatDate(eval(entry.StartDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")));
                            if (sDate != 'NaN-NaN-NaN') {
                                events.push({
                                    title: entry.Title,
                                    start: sDate,
                                    end: formatDate(eval(entry.EndDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))),
                                    allDay: entry.AllDay
                                });
                            }


                        });


                        //self.calendarEvents(ko.utils.unwrapObservable(ko.mapping.fromJS(events)));

                    }
                    console.log(events);
                    callback(events);
                }
            });
        },
        //events,
        // add event name to title attribute on mouseover
        eventMouseover: function (event, jsEvent, view) {
            if (view.name !== 'agendaDay') {
                $(jsEvent.target).attr('title', event.title);
            }
        }
    });
};

};

JQUERY

$(document).ready(function () {
   // Activates Knockout
   var vm = new CalendarVM();

   ko.applyBindings(vm);
   vm.LoadCalendar();

});

HTML

<div id="calendar" data-bind="fullCalendar: calendarViewModel" class="fc fc-ltr fc-unthemed">
    </div>

代码隐藏

[HttpGet]
public JsonResult GetCalendarEvents()
{
   calendarRepo = new CalendarRepository();

   return Json(calendarRepo.GetCalendarEvents(),JsonRequestBehavior.AllowGet);
}

Answer 1

您的代码的主要问题是，在您的 success 函数中，将所有数据推送到本地 events 变量，但您没有使用它。您应该将 GetEvents 方法更改为如下所示:

this.GetEvents = function (start, end, timezone, callback) {
    var self = this;

    $.ajax({
        type: 'GET',
        url: '/Admin/GetCalendarEvents',
        dataType: 'json',
        contentType: 'application/json',
        success: function (result) {
            var events = [];
            if (result != undefined && result.length > 0) {
                result.forEach(function (entry) {
                    events.push({
                        title: entry.Title,
                        start: entry.startDate,
                        end: entry.endDate
                    });
                });

                callback(events);
            }
        },
        error: function (err) {
            if (err.responseText == "success") {
                self.EquiptingTracks(result);
            }
            else {
                alert(err.responseText);
            }
        }
    });
};

此外，您应该在初始化时调用该函数 - 只需传递它即可:

events: vm.GetEvents