Fullcalendar，backbone.js，无法编辑事件

Question

所以，我想我在这里过头了。我正在尝试让 fullcalendar 与骨干网和 django 一起工作。我仍在学习所有这些，但我现在可以创建新事件并通过 django-tastypie 保存它们，它们确实出现在日历中，哇！但是，我无法编辑或拖动它们。 Uncaught TypeError: Cannot call method 'isNew' of undefined line 96, 是我在点击事件时得到的结果 Uncaught TypeError: Cannot call method 'save' of undefined line 78. 我已尽力解决这个问题，但没有成功.为什么 this.model.isnew() 在渲染中未定义并且保存时相同？我并不完全理解这一切，所以我可能在某个地方犯了一些愚蠢的错误，或者误解了一切是如何运作的。如果有人能给我提示，我将不胜感激。

我将console.log(fcEvent); 添加到eventClick，当我检查它时，它说开始和结束日期无效。有谁知道那是什么意思？如果我在添加 addOne 之后检查同一对象，则日期有效。如果这很重要，我也会使用https://github.com/PaulUithol/backbone-tastypie。

edit：尝试这样做以确保 events.fetch() 成功，这导致日历中没有任何事件。这是否意味着 events.fetch() 永远不会成功？我可以在日志中看到“GET /api/event/HTTP/1.1”200 6079。 替代提取：

events.fetch({
   success: function(){
   new EventsView({el: $("#calendar"), collection: events}).render();
    }});

原程序：

$(function(){
var Event = Backbone.Model.extend();

var Events = Backbone.Collection.extend({
    model: Event,
    url: '/api/event/'

}); 

var EventsView = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this); 

        this.collection.bind('reset', this.addAll);
        this.collection.bind('add', this.addOne);
        this.collection.bind('change', this.change);            
        this.collection.bind('destroy', this.destroy);

        this.eventView = new EventView();  

    },
    render: function() {
        this.$el.fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,basicDay'
            },
            selectable: true,
            selectHelper: true,
            editable: true,
            ignoreTimezone: false,
    disableResizing:false,               
            select: this.select,
            defaultView: 'agendaWeek',

            eventClick: this.eventClick,
            eventDrop: this.eventDropOrResize,        
            eventResize: this.eventDropOrResize,
    events: 'events'

        });
    },
    addAll: function() {
        this.$el.fullCalendar('addEventSource', this.collection.toJSON());
    },
    addOne: function(event) {
        this.$el.fullCalendar('renderEvent', event.toJSON(), true);

    },        
    select: function(start, end, allDay) { 
        var eventView = new EventView();
    console.log('select');
    eventView.collection = this.collection;
        eventView.model = new Event({start: start, end: end, allDay: allDay});
        eventView.render();            
    },
    eventClick: function(fcEvent) {
    console.log('click');
this.eventView.collection = this.collection;
this.eventView.model = this.collection.at(fcEvent.id);
console.log(fcEvent);
        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];
        fcEvent.title = event.get('title');
        fcEvent.color = event.get('color');
console.log('change');
        this.$el.fullCalendar('updateEvent', fcEvent); 

    },
    eventDropOrResize: function(fcEvent) {
    console.log(fcEvent);
        // Lookup the model that has the ID of the event and update its attributes
        this.eventView.collection.at(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() {
        this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val(),});
    console.log('save');
        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});
    }        
});

var events = new Events();
new EventsView({el: $("#calendar"), collection: events}).render();
events.fetch();

});

Answer 1

你可以试试这个。问题归结为undefined 模型。

在这条线上。

select: function(start, end, allDay) { 
    var eventView = new EventView();
    eventView.collection = this.collection;
    eventView.model = new Event({start: start, end: end, allDay: allDay});
    eventView.render();            
},...

改成。我感觉您的Model 没有被正确实例化。

select: function(start, end, allDay) { 
    var eventView = new EventView({
        collection: this.collection,
        model: new Event({start: start, end: end, allDay: allDay})  
    });
    eventView.render();            
},

另一个问题是，您正在实例化 EventsView 并在 fetch 调用之前传入集合和模型。

var events = new Events();
$.when(events.fetch()).then(function() {
    // Create the Events view when the Events asynchronous operation completes.
    new EventsView({el: $("#calendar"), collection: events}).render();
});

编辑：这里有一个JS Bin 以进行其他更改。

Answer 2

我得到了这个工作，除了实际上没有从日历中消失的事件，即使它们在数据库中被删除。我不知道这是否是正确的方法，可能不是，但它有效。模型在 EventView 中未定义，因此我必须从集合中获取模型并将其传递给 EventView。

 eventClick: function(fcEvent) {
    console.log(fcEvent.id);

    this.mymodel = this.collection.where({'id':fcEvent.id})[0];
this.eventView = new EventView({collection: this.collection, model: this.mymodel})
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];
        fcEvent.title = event.get('title');
        fcEvent.color = event.get('color');
console.log('change');
        this.$el.fullCalendar('updateEvent', fcEvent); 

    },
    eventDropOrResize: function(fcEvent) {
    console.log(fcEvent);
        // Lookup the model that has the ID of the event and update its attributes
        this.collection.where({'id':fcEvent.id})[0].save({start: fcEvent.start, end: fcEvent.end});            
    },