Question

所以，我想我在这里。我试图让fullcalendar与backbone和django一起工作。我仍在学习所有这些，但我现在可以通过django-tastypie制作新活动并保存它们，并且它们确实出现在日历中，我们！但是，我无法编辑或拖动它们。未捕获的TypeError：无法调用未定义的第96行的方法'isNew'，是我点击事件时得到的和未捕获的TypeError：无法调用未定义的行78的方法'保存'。我已尽力解决这个问题，但没有成功。为什么this.model.isnew（）在渲染中未定义，并且保存相同？我并不完全理解所有这些，所以我可能在某处犯了一些愚蠢的错误，或者误解了一切是如何运作的。如果有人能给我一个提示，我将不胜感激。

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

编辑：尝试这样做以确保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});            
    },

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

2 个答案: