Backbone.js 入門してハマったポイントと対策
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
一言：ついにサドル付きの自転車を購入しました！
