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公式サイト](http://backbonejs.org/)
英語

- [Backbone.js 使い方メモ（Qiita）](http://qiita.com/opengl-8080/items/36e9b380c64ba7766511)
関数の日本語解説とか

- [Backbone.jsアプリケーション開発ガイド（書籍）](https://www.amazon.co.jp/Backbone-js%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%82%AC%E3%82%A4%E3%83%89-Addy-Osmani/dp/4873116589/ref=sr_1_2?ie=UTF8&qid=1475892744&sr=8-2&keywords=backbone.js)
オライリージャパン、2014/2/7出版