javascript - 从主干集合加载完整日历事件会破坏下一个和上一个功能

Question

这里是菜鸟编码员。

我在将 fullcalendar 链接到backbone.js 时遇到问题。当我使用全日历上的“上一个”和“下一个”按钮进行导航时，就会出现问题。

这是错误:我创建了一个新事件。该事件显示在日历上。我按“下一步”。我按“上一个”。新事件消失了。

看起来 fullcalendar 需要在加载时使用“事件”选项来指定从中加载事件的函数或 JSON 提要。根据文档，“FullCalendar 将在需要新事件数据时访问该 URL。当用户单击上一个/下一个或更改 View 时，就会发生这种情况。”

我在让 fullcalendar 向 Backbone 请求事件集合(存储所有事件)的 JSON 对象时遇到了令人惊讶的困难。

我尝试过使用 事件: function() {events.toJSON();}和 事件: function() {events.fetch();}没有运气。非常感谢您的帮助。

这是我的主干代码:

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

    var Events = Backbone.Collection.extend({
        model: Event,
        url: 'events'
    }); 

    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,basicWeek,basicDay'
                },
                selectable: true,
                selectHelper: true,
                editable: true,
                ignoreTimezone: false,                
                select: this.select,
                defaultView: 'agendaWeek',
            //  events: function() {events.toJSON();},
                eventClick: this.eventClick,
                eventDrop: this.eventDropOrResize,        
                eventResize: this.eventDropOrResize
            });
        },
        addAll: function() {
            this.el.fullCalendar('addEventSource', this.collection.toJSON());
        },
        addOne: function(event) {
            this.el.fullCalendar('renderEvent', event.toJSON());
        },        
        select: function(startDate, endDate) {
            this.eventView.collection = this.collection;
            this.eventView.model = new Event({start: startDate, end: 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];
            fcEvent.title = event.get('title');
            fcEvent.color = event.get('color');
            this.el.fullCalendar('updateEvent', fcEvent);           
        },
        eventDropOrResize: function(fcEvent) {
            // 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() {
            this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val()});

            if (this.model.isNew()) {
                this.collection.create(this.model, {success: this.close});
            } 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

在永远查看这个问题之后，我意识到我正在将约会(模型)添加到集合中并调用 renderEvent() ，而 [,stick] 标志不等于 true。这使得我的约会在按下下一步/后退按钮时消失。

http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

来自文档:“http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/”

“通常，一旦日历重新获取其事件源(例如:单击上一个/下一个)，该事件就会消失。但是，将 Stick 指定为 true 将导致该事件永久固定到日历中。”