从主干集合加载完整日历事件会破坏下一个和上一个函数

Posted 2023-05-09

【中文标题】从主干集合加载完整日历事件会破坏下一个和上一个函数

【英文标题】：Loading fullcalendar events from a backbone collection breaks the next & previous functions

【发布时间】：2012-01-30 20:33:53

【问题描述】：

这里是新手编码器。

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

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

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

我在获取 fullcalendar 以向 Backbone 请求事件集合的 JSON 对象（存储所有事件）时遇到了惊人的困难。

我尝试过使用 事件：函数（）events.toJSON（）； 和 事件：函数（）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();
);

【参考方案1】：

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

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

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

“通常，一旦日历重新获取其事件源（例如：单击 prev/next 时），事件就会消失。但是，将 stick 指定为 true 将导致事件永久固定到日历中。”