FullCalendarのイベントをMojoliciousからfetchして描写したいbackbone.js

• backbone.js
• fullcalender
• Building a shared calendar with Backbone.js and FullCalendar: A step-by-step tutorial

上記を参考に作ってみる。

$(function(){
    var Event = Backbone.Model.extend();
 
    var Events = Backbone.Collection.extend({
        model: Event,
        url: 'records'
    });
 
    var EventsView = Backbone.View.extend({
        initialize: function(){
            _.bindAll(this);
 
            this.collection.bind('reset', this.addAll);
        },
        render: function() {
            $(this.el).fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay',
                    ignoreTimezone: false
                },
                selectable: true,
                selectHelper: true,
                editable: true
            });
        },
        addAll: function(){
            $(this.el).fullCalendar('addEventSource', this.collection.toJSON());
        }
    });
 
    var events = new Events();
    new EventsView({el: $("#calendar"), collection: events}).render();
    events.fetch({data:{page:3}});
});

Mojolicious側ではjsonの配列を以下のようにして適当なデータを返しているだけ

# This action will render a template
sub index {
  my $self = shift;

  $self->render(json => [{title=>"test",start=>"2013-06-13"},{title=>"test2",start=>"2013-06-14"}]);
}

このソースで動かすと、イベントが表示されない。BB1.0未満で書かれたソースだからで、次のように改造をいれる。BB1.0だとfetchしたときにresetイベントを発行しないので、オプションをreset:trueをつけてあげるといいみたい。 これだと、fetch時にresetイベントが発行されるのでうまく表示できる。

    events.fetch({reset:true, data:{page:3}});

カレンダーViewのrenderが呼ばんだあとに、FETCHを読んで、イベントを追加するという流れ。なんかしっくりこないような。くるような。

あと気になっていたところ_.bindAll(this)は第三引数を全部thisにしちゃうよみたいなものかな。下記のように書き換えてもうまく動いた。

//            _.bindAll(this);
 
            this.collection.bind('reset', this.addAll,this);