快速解释：
我正在开发一个与 Fullcalendar JS 集成的主干应用程序。创建或编辑事件时，您可以单击日历，然后会弹出一个模式询问信息。问题是当模式弹出时，我需要使用“this.model”来.get()获取有关当前事件的.set()信息或有关新事件的信息。我不断收到错误：
未捕获的类型错误：无法调用未定义的方法“get”未捕获的类型错误：无法调用未定义的
方法“设置”
我的问题： 设置点击视图的当前模型的正确方法是什么？
以下是一些相关代码：
型号及系列：
var Event = Backbone.Model.extend({
methodToURL: {
'create': addDayURL,
'update': addDayURL,
//'delete': '/user/remove'
},
sync: function(method, model, options) {
options = options || {};
options.url = model.methodToURL[method.toLowerCase()];
Backbone.sync(method, model, options);
}
});
var Events = Backbone.Collection.extend({
model: Event,
url: allDaysURL
});
主视图
var EventsView = Backbone.View.extend({
events: {
'click #add_track' : "addTrack",
'click th.fc-widget-header:not(.fc-first)' : 'updateTrack',
'click .fc-button-next' : 'switchTracks',
'click .fc-button-prev' : 'switchTracks'
},
initialize: function(){
_.bindAll(this);
this.collection.on('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
console.log(this.collection.toJSON());
console.log(JSON.stringify(this.options.collection2.toJSON()))
this.trackCollection = JSON.stringify(this.options.collection2.toJSON());
this.trackObject = jQuery.parseJSON(this.trackCollection);
this.eventView = new EventView();
this.trackView = new TrackView();
},
render: function() {
this.$el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay',
},
defaultView: 'resourceDay',
resources: this.trackObject,
droppable: true,
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
select: this.select,
eventClick: this.eventClick,
eventDrop: this.eventDropOrResize,
eventResize: this.eventDropOrResize,
drop: function(date, allDay, ev, ui, res) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// dropped event of resource a to a cell belonging to resource b?
copiedEventObject.resourceId = res.id;
//get title of event
var eventTitle = copiedEventObject.title;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
var event = new Event();
event.set({"title": eventTitle, "start_at": copiedEventObject.start, "color": null, "allday":copiedEventObject.allDay, "conference_id": conferenceID, "session_type_id": 1, "resource_Id": res.id});
events.create(event);
}
});
//Goto first event day on initialize
var start_at = Date.parse(startDate);
var year = $.fullCalendar.formatDate(start_at, 'yyyy');
var month = $.fullCalendar.formatDate(start_at, 'M');
var day = $.fullCalendar.formatDate(start_at, 'dd');
this.$el.fullCalendar( 'gotoDate', year , month, day)
this.$el.prepend('<button id="add_track" class="btn large-btn green-btn pull-right">Add Track</button>');
},
addAll: function() {
this.$el.fullCalendar('addEventSource', this.collection.toJSON());
},
addOne: function(event) {
this.$el.fullCalendar('renderEvent', event.toJSON());
},
addTrack: function() {
//get current day & format date
date = this.$el.fullCalendar( 'getDate' );
var formatDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//create new track
var newTrack = new Track;
newTrack.set({'name': 'Track 1', 'day_date': formatDate, 'conference_id': conferenceID, "session_type_id": 1});
//save track to DB
this.options.collection2.create(newTrack);
},
updateTrack: function(track) {
//var fcRes = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
//this.trackView.model = track.get('id');
console.log(this.trackView.model)
this.trackView.render();
},
switchTracks: function(){
//alert(this.$el.fullCalendar( 'getDate' ))
},
select: function(startDate, endDate, res) {
this.eventView.collection = this.collection;
this.eventView.model = new Event({start_at: startDate, end_at: endDate});
this.eventView.render();
},
eventClick: function(fcEvent) {
this.eventView.model = this.collection.get(fcEvent.id);
this.eventView.render();
},
change: function(event) {
// Look up the underlying event in the calendar and update its details from the model
var fcEvent = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
console.log(fcEvent);
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
this.$el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
alert(fcEvent.id)
// Lookup the model that has the ID of the event and update its attributes
this.collection.get(fcEvent.id).save({start: fcEvent.start, end: fcEvent.end});
},
destroy: function(event) {
this.$el.fullCalendar('removeEvents', event.id);
}
});
事件弹出模式视图
var EventView = Backbone.View.extend({
el: $('#eventDialog'),
initialize: function() {
_.bindAll(this);
},
render: function() {
var buttons = {'Ok': this.save};
if (!this.model.isNew()) {
_.extend(buttons, {'Delete': this.destroy});
}
_.extend(buttons, {'Cancel': this.close});
this.$el.dialog({
modal: true,
title: (this.model.isNew() ? 'New' : 'Edit') + ' Event',
buttons: buttons,
open: this.open
});
return this;
},
open: function() {
this.$('#title').val(this.model.get('title'));
this.$('#color').val(this.model.get('color'));
},
save: function(startDate, endDate, res) {
//copiedEventObject.resourceId = res.id;
this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val(), 'conference_id': conferenceID, "session_type_id": 1, 'track_id': 1, /*'resourceId': res.id*/});
if (this.model.isNew()) {
this.collection.create(this.model, {success: this.close, wait: true});
} else {
this.model.save({}, {success: this.close});
}
},
close: function() {
this.$el.dialog('close');
},
destroy: function() {
this.model.destroy({success: this.close});
}
});