いまま関わったプロジェクトではスマホ、フィーチャーフォンの両方対応がほとんどで、処理を共通化する為にSmarty等のサーバサイドのテンプレートエンジンを使う事で概ね問題なく対処できていたわけす。
フィーチャーフォン対応が不要なプロジェクトの場合にはAjaxで非同期にデータを取得＆処理した方がユーザビリティの面でも、開発の分担の面でも色々都合が良い訳です。その上で取得してきたデータをjqueryでDOM要素を操作してコンテンツを作る事は出来ますが、開発の簡便さ＆後々の保守性を考えると”DOM要素を操作しまくる”のは避けたい所です。
いくつか調べたところ良さそうだったのがhandlebars.js。
現在は2.0.0が最新版(2014年9月15日時点)となります。
http://handlebarsjs.com/
簡単なサンプルコード
ページ内でデータを追加取得する
ボタンを押すと初回読み込みのデータにレコードを追加します。
https://gist.github.com/akifumi-kamata/29ddd135c81b42677544
今回はボタン押下でデータ取得としていますが、 「画面の最下部までスクロールしたら追加でデータを取得する」などにも変更可能です。
また、データも固定の変数としていまが$.ajaxなど使って外部からデータを取得する様に書き換える事でより実用的になるかと思います。
次回予告？
プリコンパイルして使う
handlebars.jsは非プリコンパイルで使った場合に他のJSテンプレエンジンにくらべパフォーマンスが劣るとの事で、商用環境で使う場合にはプリコンパイルして使いたい訳です。
ただし、プリコンパイルする環境を作るのがちょっと面倒なのが難点です。。。
Helperを使う
基本的には”取得したデータをそのままはめ込む”で概ね問題ないのですが、ヘルパー関数を使う事で細かな表示処理はテンプレ側で吸収する事ができます。
時期未定ですが、プリコンパイル、Helperについても触れたいと思っています。
参考
こちら参考にさせて頂きました。ありがとう御座います！
Handlebars.jsの基本的な使い方のメモ
