Backbone Demo: Todos これ前に読んだは読んだけどどうやって動いてるのかわかんないので本体とあわせて追った。目スタックトレース、と書いてスクリプトデバッガ使えばよかったと気づいた。 annotated source code は github レポジトリにあるものと微妙にちがっていて当てにならない。あと localStorage から読み出すあたりは別の .js ファイルに書いてあるのでそっちも読まないとわからない部分もある。とりあえず AppView の render() が呼び出されるまでの流れ。
- window.App = new AppView; todos.js#L231
- Backbone.View = function(options) { backbone.js#L870
- this.initialize.apply(this, arguments); backbone.js#L875
- initialize: function() { todos.js#L169
- Todos.bind('reset', this.addAll, this); todos.js#L173 (*a)
- Todos.bind('all', this.render, this); todos.js#L174 (*b)
- Todos.fetch(); todos.js#L176
- fetch : function(options) { backbone.js#L486
- collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); backbone.js#L492
- options は {} なので collection['reset']() つまり Backbone.Collection.prototype.reset が呼ばれる。
- reset : function(models, options) { backbone.js#L473
- if (!options.silent) this.trigger('reset', this, options); backbone.js#L479
- trigger : function(eventName) { backbone.js#L109
- ここで (*a) と (*b) で bind された reset イベントと all イベントが発火して addAll と render が呼び出される
- render: function() { todos.js#L181
ついでに 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() が自動的に呼ばれます」で片付けるのは気持ち悪いので確かめてみたかった
