0

感谢这个社区给我的所有帮助，我非常感激。如果有人知道我做错了什么，我很想弄清楚:)

问题：
我刚开始使用主干。大声笑但实际上，我正在尝试构建和使用完整日历和主干来填充日历的应用程序。到目前为止一切都很顺利，我可以在日历中添加具有正确开始和结束日期的新会话。

但是在初始加载时，这些会话模型都不会填充到日历上。这是我进入的屏幕截图console.log：

正如你所看到的，当我称之为集合时，你可以看到它充满了模型。但是当我尝试转换为 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

我也是 Backbone 的新手，但也许这会有所帮助。您是否尝试过将modelsCollection 对象的属性转换为 JSON，例如：

JSON.stringify(collection.models)

这种方法对我有用。

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

于 2013-02-27T18:42:16.577 回答
0

可能是在调用您的意见后返回的async问题。events.fetch();我使用延迟来处理这个问题。

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 回答