Question

noob编码器在这里。

我无法将fullcalendar链接到backbone.js。当我使用fullcalendar上的“previous”和“next”按钮进行导航时，我的问题就出现了。

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

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

我遇到令人惊讶的困难，要求fullcalendar向Backbone询问事件集合的JSON对象（存储所有事件）。

我试过用过 events：function（）{events.toJSON（）;} 和 events：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/”

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

从骨干集合加载fullcalendar事件会破坏下一个＆amp;以前的功能

1 个答案: