使用KnockoutJS加载日历事件

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

视图模型

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

代码背后

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

这就是你如何使用它

将您的代码修改为以下内容：

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

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