使用 KnockoutJS 加载日历事件

Question

我一直在为这个问题而苦苦挣扎。我无法将事件绑定到我的全日历。我不知道该怎么办。我读过很多关于绑定的文章，但没有成功。我没有收到任何错误，我的数据未加载。我的问题是是否需要为我的事件创建自定义绑定？

视图模型

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);
            }
        }
    });
};
};

简讯

$(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

代码的主要问题是，在成功函数中将所有数据推送到局部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

Answer 2

好的，

这是我对此的建议。

在此小提琴上，有一个为日历构建自定义绑定的示例。

您需要从中获取以下内容：

ko.fullCalendar = {
    // Defines a view model class you can use to populate a calendar
    viewModel: function(configuration) {
        this.events = configuration.events;
        this.header = configuration.header;
        this.editable = configuration.editable;
        this.viewDate = configuration.viewDate || ko.observable(new Date());
    }
};
// The "fullCalendar" binding
ko.bindingHandlers.fullCalendar = {
    // This method is called to initialize the node, and will also be called again if you change what the grid is bound to
    update: function(element, viewModelAccessor) {
        var viewModel = viewModelAccessor();
        element.innerHTML = "";
        $(element).fullCalendar({
            events: ko.utils.unwrapObservable(viewModel.events),
            header: viewModel.header,
            editable: viewModel.editable
        });
        $(element).fullCalendar('gotoDate', ko.utils.unwrapObservable(viewModel.viewDate));
    }
};

这就是你使用它的方式

<div data-bind="fullCalendar: calendarViewModel"> </div>

获取代码并将其修改为以下内容：

var vm = function() {
    var self = this;
    self.calendarViewModel = ko.observable();
    self.viewDate = ko.observable(Date.now());
    self.GetEvents = function () {
        $.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
                        });
                    });
                    self.calendarViewModel(new ko.fullCalendar.viewModel({
                        events: events,
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        editable: true,
                        viewDate: self.viewDate
                    }));
                }
            },
            error: function (err) {
            }
        });
    }
}

代码尚未经过测试，如果您遇到问题，请告诉我，然后我们可以解决这些问题。