Backbone.jsでTODOアプリ　Backbone.jsの基礎、日本語で解釈　(ざっくり)

何がしたいか：入力フォームで入力して、タスクを複数追加　各タスクのアイコンで削除、チェック、編集を行う

そのためには：
　・まずは1個1個のタスクを、モデル、ビューの連携で生成
　・タスクモデルを作成(defaults,initialize,renderは最低必要) これは一つ一つ
　・そのモデルを元に、タスクビューを生成(どのモデルを渡すかのmodelプロパティはインスタンス化の時または冒頭で生成できる)
・タスクビューにeventsを設定　　renderでDOM操作(ここでtemplate機能を使う)　html()とappend()の違いに注意　
　・これでモデルのデータをビューに渡す準備ができた。

　
　・しかしタスクは追加して行きたいので複数扱う必要があるそこでコレクション
　・コレクションといってもプロパティを持たせるだけで、Backbone.Collection.extendでmodelプロパティにモデルインスタンスを指定(どのモデルを引き継ぐのか)　このコレクションをインスタンス化してコレクションを定義
　・もしコレクションにデータを渡す場合には配列の形でモデルインスタンスを渡すこと
　　

　・モデルとビューとコレクションの連携
　・連携させて複数のタスクを扱うビューを生成
　・collectionプロパティで、どのコレクションを引き継ぐのか設定
　・オブザーバーパターンではモノ(ここではタスクのデータ)をaddした時に次のメソッドが呼べるようにしておく
　・addItemではデータ(ここではtext)を元にmodelを作成し、それをadd
・次に呼ばれるappendItemで、データ(さっきのmodel)を元にビューを作成させるようにしておく。
　・実際DOMに反映させる、renderでは、eachでそのビューを全てまわして、templateをappend()してどんどん追加しておく

モデルとコレクションとビューの連携の部分

var SomeItem = Backbone.View.extend({
    el: $('.js-todo_list'),
    //どのコレクションを引き継ぐのか
    collection: some,
    initialize: function () {
        _.bindAll(this, 'render', 'addItem', 'appendItem'),
            this.collection.bind('add', this.appendItem),
            this.render()
    },
    addItem: function (text) {
        //モデルを作成
        var model = new Item({ text: text });
        //collectionに引数で入力されたtextを元につくったmodelを追加
        this.collection.add(model)
    },
    appendItem: function (model) {
        //ビューを作成
        //addItemで作ったmodelをもとに
        var itemView = new ItemView({ model: model });  
        //テンプレートを使うために1個1個のビューを使うこと
        this.$el.append(itemView.render().el);
        console.log('要素', itemView.render().el);
    },
    render: function () {　　//一つ一つタスクを追加していくだけなので必要ない
        //renderはDOM操作
        //1個1個ビューの中のtemplateを使う
        var that = this;
        //h紐づいているlistのビューをeachしているmodel i
        this.collection.each(function (model, i) {
            that.appendItem(model); 
        });
        return this;
    }
});
var someItem = new SomeItem({ collection: some });

adddItem: textでmodelを作成->そのmodelをもとにコレクションを追加
appendItem: さっきのmodelを元にビューを作成 -->実際にtemplateを使ってappend
render: collectionに追加したmodelの数だけappendItemしていく

モデルを作って、コレクションに追加して、コレクションにとどめておいたものを、
ビューにして、

(要素の形)で一つ一つtemplateに渡していく(前のビューのrenderで)

タスク、ビュー、コレクションの連携で、データがどのように紐づけられているのを理解するのに時間がかかったが、

renderで実際にtemplateを持たせてDOMをいじるまでは、複数のものを回すための雛形を作っていると理解すると腑に落ちた

たかブログ

webを勉強しています。

Backbone.jsでTODOアプリ　Backbone.jsの基礎、日本語で解釈　(ざっくり)