“this.model”无法处理点击的视图。 Backbone JS

时间:2013-03-04 17:05:55

标签: javascript jquery backbone.js model

快速解释: 我正在开发一个与Fullcalendar JS集成的骨干应用程序。创建或编辑活动时,您可以单击日历,弹出模式以询问信息。问题是当模式弹出时我需要使用“this.model”来关于当前事件的.get()信息或关于新事件的.set()信息。我一直收到错误:

未捕获的TypeError:无法调用未定义的方法'get' 未捕获的TypeError:无法调用未定义的方法'set'

我的问题: 设置单击视图的当前模型的正确方法是什么?

以下是一些相关代码:

型号&系列:

 var Event = Backbone.Model.extend({
    methodToURL: {
        'create': addDayURL,
        'update': addDayURL,
        //'delete': '/user/remove'
    },
    sync: function(method, model, options) {
        options = options || {};
        options.url = model.methodToURL[method.toLowerCase()];

        Backbone.sync(method, model, options);
    }
});

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

主视图

    var EventsView = Backbone.View.extend({
    events: {
        'click #add_track' : "addTrack",
        'click th.fc-widget-header:not(.fc-first)' : 'updateTrack',
        'click .fc-button-next' : 'switchTracks',
        'click .fc-button-prev' : 'switchTracks'
    },
    initialize: function(){
        _.bindAll(this); 

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



        console.log(this.collection.toJSON());
        console.log(JSON.stringify(this.options.collection2.toJSON()))

        this.trackCollection = JSON.stringify(this.options.collection2.toJSON());
        this.trackObject = jQuery.parseJSON(this.trackCollection);

        this.eventView = new EventView();
        this.trackView = new TrackView();         
    },
    render: function() {
        this.$el.fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaDay',

            },
            defaultView: 'resourceDay',
            resources: this.trackObject,
            droppable: true,
            selectable: true,
            selectHelper: true,
            editable: true,
            ignoreTimezone: false,                
            select: this.select,
            eventClick: this.eventClick,
            eventDrop: this.eventDropOrResize,        
            eventResize: this.eventDropOrResize,
            drop: function(date, allDay, ev, ui, res) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');

                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;

                // dropped event of resource a to a cell belonging to resource b?
                copiedEventObject.resourceId = res.id;

                //get title of event
                var eventTitle = copiedEventObject.title;

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
                var event = new Event();
                event.set({"title": eventTitle, "start_at": copiedEventObject.start, "color": null, "allday":copiedEventObject.allDay, "conference_id": conferenceID, "session_type_id": 1, "resource_Id": res.id});
                events.create(event);
            }
        });

        //Goto first event day on initialize
        var start_at = Date.parse(startDate);
        var year = $.fullCalendar.formatDate(start_at, 'yyyy');
        var month = $.fullCalendar.formatDate(start_at, 'M');
        var day = $.fullCalendar.formatDate(start_at, 'dd');

        this.$el.fullCalendar( 'gotoDate', year , month, day) 
        this.$el.prepend('<button id="add_track" class="btn large-btn green-btn pull-right">Add Track</button>');
    },
    addAll: function() {
        this.$el.fullCalendar('addEventSource', this.collection.toJSON());
    },
    addOne: function(event) {
        this.$el.fullCalendar('renderEvent', event.toJSON());
    }, 
    addTrack: function() {
        //get current day & format date
        date = this.$el.fullCalendar( 'getDate' );
        var formatDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');

        //create new track
        var newTrack = new Track;
        newTrack.set({'name': 'Track 1', 'day_date': formatDate, 'conference_id': conferenceID, "session_type_id": 1});

        //save track to DB
        this.options.collection2.create(newTrack);
    },  
    updateTrack: function(track) {
        //var fcRes = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
        //this.trackView.model = track.get('id');
        console.log(this.trackView.model)
        this.trackView.render();  
    },
    switchTracks: function(){
        //alert(this.$el.fullCalendar( 'getDate' ))
    },
    select: function(startDate, endDate, res) {
        this.eventView.collection = this.collection;
        this.eventView.model = new Event({start_at: startDate, end_at: 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];
        console.log(fcEvent);
        fcEvent.title = event.get('title');
        fcEvent.color = event.get('color');
        this.$el.fullCalendar('updateEvent', fcEvent);         
    },
    eventDropOrResize: function(fcEvent) {
        alert(fcEvent.id)
        // 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(startDate, endDate, res) {
        //copiedEventObject.resourceId = res.id;
        this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val(), 'conference_id': conferenceID, "session_type_id": 1, 'track_id': 1, /*'resourceId': res.id*/});
        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});
    }        
});

1 个答案:

答案 0 :(得分:1)

您的日历视图看起来没有与之关联的模型。在实例化模型时,您需要将模型传递到日历视图中。当您致电this.eventView = new EventView();时,您并未在主视图中为其提供对基础模型的引用。