Backbone.jsでcollectionを使用したtableの表示

表示させるまでにメチャクチャ苦労したので。。。

これが正しいかどうかは知らないが、とりあえず表示されたのでオッケー

$(function(){

    // ユーザー名の取得
    var name = $('h1#name').text();

    // -------- backbone.js ------------------------------------------

    // Model
    var Ticket = Backbone.Model.extend({
    });

    // Collection
    var TicketList = Backbone.Collection.extend({
        model: Ticket,
        url: function(){
            var ret = "http://127.0.0.1:9000/get/tickets?username=" + name;
            return ret;
        },
        parse: function(resp){
            if(resp.error){
                // エラーがあればエラーメッセージ表示
                alert(resp.error.message);
            }
            // モデルに格納するデータ部分を返す
            return resp.tickets;
        }
    });

    // View
    var TicketView = Backbone.View.extend({
        tagName: 'tr',
        template: _.template($('#ticket-template').html()),
        // 描画処理
        render: function(){

            var data = this.model;

            var html = this.template(data);

            $(this.el).html(html);
            return this;
        }
   });

   var TicketListView = Backbone.View.extend({
        // tagName: 'tbody',
        el: 'tbody',
        initialize: function(){

            var that = this;

            // データ取得
            this.collection.fetch({
                success: function(model, resp){
                    // parse された結果が返ってくる
                    // renderする
                    that.render();
                },
                error: function(model, resp){
                }
            });
        },
        // 描画処理
        render: function(){
            /*
                TicketViewにTicketを渡してrenderする
            */

            // collection を回す
            this.collection.each(function(ticket){
                var view = new TicketView({
                    model: ticket.attributes
                });
                // 個々のTicketViewの描画
                view.render();

                $(this.el).append(view.el);
                // $("#tickets table").append(view.el);

            }, this);
            return this;
        }
   });
    // ListViewの生成
    var ticketListView = new TicketListView({collection: new TicketList()});

}

Backbone.jsガイドブック