rails + Backbone.jsでhaml-jsをテンプレートとして使う方法- Backbone.js - rails- jammit

まずさらっと紹介。

・backbone.js
…クライアントサイドjsにMVCを提供してくれるすんげーライブラリ。railsと相性抜群（っぽい。まだサラっとしか見てません）

railsと連携してルーティングとか使ってみたいので、knockoutjs使ってましたがこっちに切り替えようかなと思ってます。

・jammit
…jsのテンプレートとかcssとかをパッケージングしてくれるライブラリ。backbone.jsのviewテンプレートについて調べてたら出てきました。

・haml
…htmlの省略記法を提供するマークアップ

Backbone is agnostic with respect to your preferred method of HTML templating. Your render function could even munge together an HTML string, or use document.createElement to generate a DOM tree. However, we suggest choosing a nice JavaScript templating library. Mustache.js, Haml-js, and Eco are all fine alternatives. Because Underscore.js is already on the page, _.template is available, and is an excellent choice if you've already XSS-sanitized your interpolated data.
Backboneのドキュメントより

ってことで、慣れてることもありテンプレートはHaml-jsを使いたいと思います。

まずjammitインストール

# /yourapp/Gemfile
gem "jammit"

でbundle

次にjammitが使うテンプレートフォルダと拡張子、javascriptをincludeする際のkeyを指定

# /yourapp/config/assets.yml
embed_assets: on

#拡張子の追加
template_extension: jst.haml
template_function: Haml

javascripts:
　#includeする際のkey
  workspace:
　　　#テンプレートフォルダとファイルマッチ
    - app/views/**/*.jst.haml

って感じになる思います。

あとはhttps://github.com/visionmedia/haml.js/
をダウンロードしてpublic or vendor下に配置

最後に、ヘッダで先ほど設定したjammitのキーでjsを読み込みます。

- #/yourapp/app/views/layouts/application.html.haml.or.something
!!!
%html
  %head
    = javascript_include_tag "/haml-js/lib/haml.js"
    = include_javascripts :workspace
    ...

以上です。

# /yourapp/app/views/some/thing.jst.haml
%h1 hello haml js world

みたいなの書くとjammit君がコンパイルしてくれて

/* /assets/workspace.jst.haml */
(function(){
window.JST = window.JST || {};
window.JST['some/thing'] = Haml('%h1 hello haml js world\n\n');
})();

こんなん生成してくれます。

参考 -

・haml-js,jammit設定方法について
・backboneでのベストなhamltemplateの使い方について - stack overflow
・knockoutjsとbackbone.jsどっちがいいかについて - stack overflow

Backbone seeks to be more a full MVC platform, whereas Knockout.js gives you a foundation to apply MVVM/MVP and go from there.
knockoutjsとbackbone.jsどっちがいいかについてより

辺りが議論呼んでそうですね。

knockoutjs１〜２週間くらい触りましたが*observable*とデータバインドの威力は絶大でした。

データを更新するとUIが自動的に書き換わるのは書いててすげー衝撃的な楽さでした。

ただMVVMに慣れていないせいかデータ定義とメソッドがごっちゃになってしまって、コード量が増えてくるとリファクタに手こずった、というのが第一の感想です。

まだMVVMのアーキテクチャへの理解が深まる前ですが、Backbone.jsも試してみたいと思います。