使用 KnockoutJS 加载日历事件

Question

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

ViewModel

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()")));
                            if (sDate != 'NaN-NaN-NaN') {
                                events.push({
                                    title: entry.Title,
                                    start: sDate,
                                    end: formatDate(eval(entry.EndDate.replace(/\/Date\((\d+)\)\//gi, "new Date()"))),
                                    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

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

好的，这是我的建议。

在此 fiddle 上有一个为您的日历构建自定义绑定的示例。

您需要的是：

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) {

            }
        });
    }
}

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

使用 KnockoutJS 加载日历事件

Loading calendar events with KnockoutJS

jquery

fullcalendar

knockout.js