0

このコミュニティが私に与えてくれたすべての助けに感謝します。私は非常に感謝しています. 誰かが私が間違っていることを知っているなら、私はこれを理解したいです:)

問題:
バックボーンを使い始めたばかりです。笑 しかし、実際には、完全なカレンダーとバックボーンを使用してカレンダーを作成するアプリを構築しようとしています。これまでのところすべて順調に進んでおり、正しい開始日と終了日で新しいセッションをカレンダーに追加できます。

ただし、最初のロードでは、これらのセッション モデルはいずれもカレンダーに入力されません。ここに私が入っているもののスクリーンショットがありますconsole.log:

jus をコレクションと呼ぶとわかるように、モデルでいっぱいです。しかし、JSON に変換しようとすると、空になります。これについて Stack Overflow で多数の回答を見つけましたが、どれもこれを機能させていないようです。私は公式に通行止めになっています。笑

コレクションを表示するために使用するコードを次に示します

  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"
    },
    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(); 

        console.log('this.collection: ', this.collection);
        console.log('this.collection.toJSON(): ', this.collection.toJSON());
        console.log('JSON.stringify(this.collection.toJSON()): ', JSON.stringify(this.collection.toJSON()));
        //console.log(this.collection.toJSON())

        // your model2 option: this.options.collection2.toJSON();
        //console.log(this.options.collection2.toJSON());           
    },
    render: function() {
        this.$el.fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay',

            },
            //defaultView: 'resourceDay',
            resources: //this.options.collection2.toJSON()
            [
                {
                    /*
                     * trackID
                     * name
                     * backgroundColor
                     * foregroundColor*/

                    id: 1,
                    name: 'Track 1',
                    color: 'red',
                    textColor: 'black'
                },
                {
                    id: 2,
                    name: 'Track 2',
                    color: 'blue'
                },
                {
                    id: 3,
                    name: 'Track 3',
                    color: 'pink'
                },
                {
                    id: 4,
                    name: 'Track 4',
                    color: 'green'
                },
                {
                    id: 5,
                    name: 'Track 5',
                    color: 'yellow',
                    textColor: 'black'
                }
            ],
            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;


                // 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();
                }

                this.addOne;
            }
        });
        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());
    }

編集: コレクションを初期化してこのコードを設定するには、ファイルの下部に次のコードがあります。

var events = new Events();
var tracks = new Tracks();
new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
new AddSessionView({ collection: events}).render();
events.fetch();
4

4 に答える 4

0

私もバックボーンは初めてですが、これが役立つかもしれません。models次のように、Collection オブジェクトのプロパティを JSON に変換しようとしましたか。

JSON.stringify(collection.models)

このアプローチは私にとってはうまくいきました。

JSFiddle: http://jsfiddle.net/YcFmB/

于 2013-02-27T18:42:16.577 に答える
0

ビューが呼び出された後に返されるというasync問題が発生する可能性があります。events.fetch();これに対処するために deferred を使用します。

var events = new Events();
var tracks = new Tracks();

$.when( events.fetch() )
.done( function(data) {
  console.dir(data)
  new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
  new AddSessionView({ collection: events}).render();
});

ただし、あなたbindのresetはそれを処理する必要があります...

console編集：上記の読みが何であったか知りたいですか？

于 2013-02-27T19:07:34.080 に答える
0

これを試して ：

var events = new Events();
var tracks = new Tracks();

events.fetch();

new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
new AddSessionView({ collection: events}).render();
于 2013-02-27T19:09:31.730 に答える
0

これは非同期操作であると読んだfetch()ので、コレクションをフェッチすると ajax 呼び出しが送信され、何も起こらなかったようにコードが実行され続けます。

fetch()成功ハンドラー内に最初のビューを作成することになりました。

events.fetch({success: function (models) {
    tracks.fetch({success: function (models) {
        new EventsView({el: $("#calendar"), collection: events, collection2: tracks}).render();
    }});
}});
于 2013-02-28T18:23:22.973 に答える