Backbone.js とは JavaScriptフレームワークです。
http://backbonejs.org/

Backboneをはじめて利用するにあたってハマったポイントと対策に
JSフレームワークについての感想を簡単に書いてみました。

ハマってみるのも醍醐味かもしれませんが、時間の無駄とも言わざる得ないので
同じように困った方のためになればいいなぁ、と自戒を込めて記録しようと思います。

ちなみにエラーメッセージはちゃんと出るんですが、どこで起きてるエラーなのか
突き止めるのに時間が掛かったりします。
エラーメッセージに慣れてくると「あ、これ見たことあるエラーだ」とハマる時間も減ります。

◯エラーメッセージと対策

※開発中はChromeでも確認していたので、Chromeのエラーメッセージとなります。
※凡ミスだらけですが、ご了承ください。

・Uncaught TypeError: Cannot call method 'append' of undefined

　コレクションを_.eachでビューに出力するとき、_.eachのコンテキストにthisを指定し忘れていた。

・this.set is not a function

　Backbone.Modelを継承したモデルオブジェクトをインスタンス化するときに new を付け忘れていた。

・Uncaught TypeError: Object #<Object> has no method 'replace'

　_.template()を使っているあたりが原因。2パターンやらかしました。
　1: .html() の引数が間違っていた。
　2: メンバに template() を定義しているのに this.template() ではなく _.template() を呼び出そうとしていた。

・Uncaught TypeError: Object {メソッド名} has no method 'call'

　モデルにバインドしたメソッド（第二引数）を "saveAll" と指定していた。正しくは this.saveAll

・フォームでコレクションに追加したビューが2つ出力されてしまった

　collection.add() と collection.create() を同時に実行していたから。
　add()はコレクションに追加してaddイベント発火
　create()はコレクションとストレージへ追加してaddイベント発火（addイベントは発火しないと思っていた）

◯JSフレームワークについて

触るだけならAngularとか色々触っていたのですが、実際の開発では初めて使いました。これまでjQueryだけでガリガリとイベント駆動開発していたのですが、やはりBackboneのような何らかのJSフレームワークで仕組みを提供してくれるとリファクタリングとか、大分楽です。

また、なぜBackboneなのかについては、私の場合は評判が悪くないすぐに使えそうなフレームワークでだったからです。実際他のフレームワークより情報が多かったので助かりました。ただ、向き不向きが存在するJavaScriptフレームワークはシーンによって使い分けることも大切だと思いました。

今回の経験を活かして、何かないかと思ったけど、サーバサイドと連携したRESTfulなアプリケーションぐらいしかパッと思いつかなかったので、そういったのもやってみたいなと思いました。

◯Backboneで参考になったサイト

　http://backbonejs.org/
　http://todomvc.com/architecture-examples/backbone/
　http://www.adventar.org/calendars/15
　http://qiita.com/items/03f49c64d6c4bacdbb26
　http://dotinstall.com/lessons/basic_backbonejs

一言：ついにサドル付きの自転車を購入しました！