1

だから、私はここで頭を抱えていると思います。フルカレンダーをバックボーンとジャンゴで動作させようとしています。私はまだこれらすべてを学んでいますが、新しいイベントを作成してdjango-tastypie経由で保存できるようになり、カレンダーに表示されます. ただし、それらを編集またはドラッグすることはできません。Uncaught TypeError: Cannot call method 'isNew' of undefined line 96, cannot call method 'isNew' of undefined line 96, is what I get when events are clicked and Uncaught TypeError: Cannot call method 'save' of undefined line 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();

});
4

2 に答える 2

0

イベントがデータベースで削除されても、実際にはカレンダーから消えないイベントを除いて、これは機能しました。これがこれを行う正しい方法であるかどうかはわかりませんが、おそらくそうではありませんが、うまくいきました。モデルは 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});            
    },
于 2013-04-30T23:59:41.440 に答える