Backbone.js

自分が思うBackbone.jsを使うと幸せになれるポイント
1. APIからの値取得がかなり楽。パースしてモデルに格納後にイベントを飛ばしてくれる。あとはそれをレンダリングするだけ。

　 //通信用のモデルの定義
    app.model.song= Backbone.Model.extend();
    app.collection.playlist = BackBone.Collection.extend({
        model : app.model.song
        url : function() {
            return ”hoge”; //APIのURLを記述
        },

        parse : function(res) {
　　　　//xmlが返される場合は
　　　　//var json_res =$.xml2json(res);
            //jsonの中にsongというオブジェクトが1..nである想定
　　　  return res.song;            
         },
        fetch : function(params, options) {
            var self = this;
            //リクエストパラメータ設定
            self.params = params;
            self.params.start = 1;
            self.params.count = self.maxCount;

            options || (options = {});
            options.dataType = "xml";
            options.timeout = this.timeout;

　　　　//成功時、エラー時の処理
            if (!options.success) {
                options.success = self.handleSuccess;
            }
            if (!options.error) {
                options.error = self.handleError;
            }
            Backbone.Collection.prototype.fetch.call(self, options);
        }
    });
    //viewの定義　collectionからresetがきたらrender開始
   //collectionからmodelを取り出してappendするビューを生成
    app.view.playlist = Backbone.View.extend({
        el: '#playlist',
        events : {
        },
        initialize : function() {
            this.collection = new app.collection.playlist();
            this.collection.bind("reset", this.render, this);
        },
        //テンプレート定義
       template: _.template(…),
        //resetが発火されると自動的にレンダーがはしる。
        render : function() {
            var self = this;
            console.log(self.collection);
            $.when(
                self.$el.html(self.template(self.collectiontoJSON()));
            ).done(function(){
                self.collection.each(function(model){
                    var view = new app.view.song({
                        model : model
                    });
                    self.$el.find('#song-list').append(view.render());
                });
            });
            return false;
        }
    });
   app.view.song = Backbone.View.extend({
        tagName: 'li',
        template: _.template(…),
        events : {
            "click .openReply":"openReply"
        },
        initialize : function() {
        },
        render : function() {
            var self = this;
             this.$el.html(this.template(self.model.toJSON()));
            return this.el;
        },
        openReply: function(){
           //複数appendされた要素のうちクリックされたものだけは反応する。
       }　　　
    });　 

みたいな感じです。jsonのパース処理とか全くしなくてもcollectionの中のmodelにいれてくれます。

2. リスト作成時にリストアイテム毎に動的にIDを振らなくてもいい。
生成されたviewはそれぞれ独立してイベントがバインドされているため、events内に定義されたイベントは、
同一のviewであっても、そのインスタンスのみ反応します。

ちょっと言葉では説明しずらいのですが、同様のことをjQueryで実装しようとするとulの下のliにはそれぞれ別のidないしは、
classを定義する必要があるのですが、veiwから生成した場合、そういったことをキにしなくても問題ありません。
生成時にエレメントに対してユニークなIDをふっているようです。

説明がざつなのでちゃんと伝わったか自信ないのですが、ajaxからとってきてリスト表示みたいな処理にはかなり楽できます。
fetch以外にもmodelやcollectionに変更があった場合、レンダリングできるようにいろんなカスタムイベントが用意されています。

例えば通信にかぎらず、modelの中の文字列をかえたら自動的にviewに反映とか簡単にできます。

他にもかなり色々できます。

眠くなってきたのでこのへんで終わります。

今年もよろしくお願いします。