20140511 - kyosen/developing-backbone.js GitHub Wiki

活動概要

  • 日時: 2014/05/11日(日) 13:00〜
  • 参加者: 井谷、伊藤、乙村、辻、矢野、米田
  • 欠席者:
  • 内容: Backbone.jsアプリケーション開発ガイド 4章、付録A

4章 チュートリアル1 - Todoリスト（初めてのBackbone.jsアプリケーション）

4.1 静的HTML

  • p76 lang="en"となっているがjaにするべき？（伊藤）

    • どこに効いてくるのか不明。
    • zhにするとフォントが変わる。（伊藤）

  • p78 リンクの#の意味は？（井谷）

    • アンカー。ページ内遷移という意味。（伊藤）
    • aタグの中でonclickなどJavaScriptを実行したいだけのリンクを作る場合にhref="#"とする場合がある。（矢野）

4.2 Todoモデル

  • p79 var app = app || {};とは？（米田）

    • p332 A.5.1.2 に解説あり。
    • appが存在すればそのまま使うし、なければ空のオブジェクト{}を使う。
    • Booleanが返り値になるわけではない？（伊藤）

  • p79 app.Todo = のTodoとは？（乙村）

    • appオブジェクトにTodoプロパティを追加している。

4.3 Todoコレクション

  • p80 var TodoListだけapp接頭辞をつけていないのはなぜ？（伊藤）

    • TodoListを他で使っていないから不要？（乙村）
    • appをつけてみると普通に動いた。（米田）

  • p80 localStorageの効果は？（乙村）

    • syncが置き換えられる。デフォルトだとAjax呼び出し。（井谷）

  • p80 localStorageの行をコメントアウトするとどうなる？（伊藤）

    • リモートへのリクエストが発生する？（井谷）
    • 動かなかった。（伊藤）
    • Uncaught Error: A "url" property or function must be specified が出た。（矢野）

  • localStorageのサイズを調べるとChromeの場合10MBだった。（米田）

4.4 アプリケーションのビュー

  • p81 Element Controllerというパターンが使われている。（井谷）

    • 調べても出てこない。（辻）
    • Backbone.js独自のもの？

  • p82 this.allCheckbox = this.$('#toggle-all');が間違い。（矢野）

    • this.$('#toggle-all')[0];が正しい。

  • p82 this.$inputの$付き変数はどういう意味か？（井谷）

    • jQueryオブジェクトだと見てわかるようにするための慣例。（矢野）
    • とするとallCheckboxにもあるべき？

  • p82 addOneの中の$('#todo-list')にthisが付いていないのは？（乙村）

    • thisがあればel要素の中から探して、なければHTML全体から探す？（乙村）

4.5 個々のTodo項目のビュー

  • p87 app.TodoViewの定義と使っているJSファイルが異なる（views/app.jsとviews/todos.js）が、JSファイルの読み込み順を気にしなければいけない？（乙村）
    • 使っている方（views/app.jsのaddOne関数）が実行されるまでに定義されていれば良い。（伊藤）

4.6 アプリケーションの起動

  • p89 var ENTER_KEY = 13;は何のためか？（辻）
    • JavaScriptには入力されたキーを表す名前付き定数がない。（矢野）

4.7 処理の実際

  • Firefoxだとチェックボックスのアイコン部分が異なる。（伊藤）
  • IEでは動かない。（伊藤）

4.8 処理の変更と項目の削除

4.9 Todoのルーティング

  • p95 routers.jsにvar app = app || {};が必要。

  • p95 var Workspaceもapp接頭辞がついていない。（辻）

  • p95 filterイベントはどこかで監視している？（伊藤）

    • p84にある。（米田）
    • app.AppView ビューで app.Todos コレクションの 'filter' イベントを監視している。イベント発生時、filterall から filterOne がよばれ、その内部で app.Todo モデルの 'visible'イベントが発生。
    • P.92 app.TodoView ビューで、app.Toto モデルの 'visible' イベントを監視している。イベント発生時、toggleVisible からisHidden がよばれ、その内部で app.TodoFileter （router.jsで更新）を参照している。

  • p96 splatとは？（伊藤）

    • p65に解説あり。スラッシュをまたがってURLにマッチする。（矢野）

4.10 まとめ

付録A

A.1 JavaScriptによるシンプルなMVCライブラリ

  • Cranium.jsは著者が作ったもの？（伊藤）
    • 検索すると著者のGistページが出るのでそうらしい。（伊藤）

A.2 MVP

A.3 MVCとMVPの比較

A.4 MVC、MVPそしてBackbone.js

A.5 名前空間

A.6 Backbone.jsの依存先

A.7 他のライブラリやフレームワークとの比較

次回の予定

  • 06/29(日)
  • 5章, 6章
  • 必ず写経してくること！
    • 写経できない部分でもサンプルの意味を理解する
    • 必要な理論があればそれも理解してくる