Backbone.jsでのコーディング規約（自分用）

書き途中ですが公開
現在自分が分かるようにしか書いていません、メモです
後で修正するかも

#Modelの実装

• 基本的に表示に必要な属性を全て
• 親の要素で持っているものも全て複製（表示のときに使えないので）

↓な感じで実装すれば自動で親Modelが変更されたとき子Modelも変更される

this.listenTo(this.parent.model, 'change:atributeName', function(){
    this.model.set('atributeName', this.parent.model.get('atributeName')); 
});

• 表示を変更するにはModelの値を変更して自動render
• Modelの属性を加工するときは独自のフィルター（加工）メソッドを定義してViewから使う

#Viewの実装(initialize)
###ModelのViewのとき

initialize: function(){
    this.listenTo(this.model, 'change', function(){
        //Modelの値が変わったら再描画
        this.render();
    });

    //ModelからViewを参照できるようにする
    this.model.view = this;

    this.render();
}

###CollectionのViewのとき

initialize: function(){
    this.listenTo(this.collection, 'reset', function(){

        this.render();
    });

    this.collection.view = this;
    this.render();
}

#Viewの実装（render）
###ModelのViewのとき

render(): function(){
    //-----------------
    // 子Viewがすでにあれば破棄
    //-----------------
    if (this.children === undefined) {
        this.children.remove();
    }
    this.$el.empty();

    //-----------------
    // 子Viewを作成
    //-----------------
    //自分のelementを作成
    this.$el.html( this.template(this.model.attributes) );
  

    //子Viewを生成（子Viewから自分を参照できるようにする）
    this.children = new View({
        model: chMdl
    });

    //子Viewと自分をくっつける
    this.$el.append(this.children);
    
    return this;
}

###CollectionのViewのとき

render(): function(){
    //-----------------
    // ModelのViewがすでにあれば破棄
    //-----------------
    if ( this.children === undefined) {
        for (var i in this.children) {
            this.children[i].remove();
        }
    }

    //-----------------
    // ModelのViewを作成
    //-----------------
    //自分のelementを作成
    this.$el.html(this.template(this.model.attributes));

    //各ModelのViewをそれぞれ生成しながらelにくっつける
    this.collection.forEach(function(eachModel, i){
        //子Viewを生成
        var mdlView[i] = new View({
            model: eachModel
        });

        //子Viewと自分をくっつける、↓以外いろんなくっつけ方があると思う
        this.$el.append(mdlView[i]);

        //子Viewから自分を参照できるようにする
        this.children.parent = mdlView[i];
    });

    return this;
}

#Viewの実装（Event）
イベントアグリゲーター形式で実装する
なるべくそのモジュールのTOPのviewで発生させる
グローバルのTOP（Backbone.tirgger()）はイベントが競合したり、インスタンス生成を複数回するとき競合するからダメ

###イベント発生側のView

event: {
    '.className touchstart': function(){
        //TOPのViewで発生させる
        this.parent.trigger('EventName', var1);
    }
}

###イベントリスナーのセット側のView
####TOPViewのとき

this.on('EventName', function(var1){
    this.model.set('attributeName', var1);
});

####TOP一つ下のViewのとき

this.listenTo(this.parent 'EventName', function(var1){

});

#その他メモ
modelの値を書き換えるときは、同じ階層のViewで行うこと
見通しが悪くなるので

#その他メモ2
こうした方がいいかも
###親View

this.children = new View({
    model: mdl,

    //子Viewに自身のViewを渡す、attributeでしかインスタンス生成時には渡せない
    attribute: this   
});

###子View

initialize: function(){
    //インスタンス生成時にattributeで親Viewが渡されている
    this.parent = this.attribute;

    //以下親View（this.parent）に関する処理がかける
}

これためそう
http://qiita.com/yd_niku/items/3e9204dd169125ae0b9f

#参考リンク、本

• Backbone.js公式サイト
  英語

• Backbone.js 使い方メモ（Qiita）
  関数の日本語解説とか

• Backbone.jsアプリケーション開発ガイド（書籍）
  オライリージャパン、2014/2/7出版