@kyanny's blog

My thoughts, my life. Views/opinions are my own.

Backbone Demo: Todos の処理の流れを追う

Backbone Demo: Todos これ前に読んだは読んだけどどうやって動いてるのかわかんないので本体とあわせて追った。目スタックトレース、と書いてスクリプトデバッガ使えばよかったと気づいた。 annotated source code は github レポジトリにあるものと微妙にちがっていて当てにならない。あと localStorage から読み出すあたりは別の .js ファイルに書いてあるのでそっちも読まないとわからない部分もある。とりあえず AppView の render() が呼び出されるまでの流れ。

ついでに localStorage から保存済みの Todo を読み出す部分 (あとで書く)

  • window.Todos = new TodoList; todos.js#L68
  • window.TodoList = Backbone.Collection.extend({ todos.js#L35
  • localStorage: new Store("todos"), todos.js#L41
  • var Store = function(name) { backbone-localstorage.js#L17
  • var store = localStorage.getItem(this.name); backbone-localstorage.js#L19
  • this.data = (store && JSON.parse(store)) || {}; backbone-localstorage.js#L20
    • ここまでで localStorage からデータを読み終わってて Backbone.sync を backbone-localstorage.js で上書きしてるので Todos.fetch() したときに read イベントで store.findAll() が初回に走ってそのあとに collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); から reset -> add などと呼ばれていってあー見失った。。


なんでこんなことやろうと思ったのかもついでにメモ

  • new AppView() しただけでいろいろ表示されるのが魔法みたいで不思議だった
  • 魔法なんてあるわけないし、ちゃんと render() が呼ばれてるはずだけどどういう処理の流れで呼ばれるのかわからなかった
  • 「new したら render() が自動的に呼ばれます」で片付けるのは気持ち悪いので確かめてみたかった