A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

JavaScript

JSテンプレートエンジンhandlebars.jsを使ってみる

投稿日:2014年9月15日 更新日:

いまま関わったプロジェクトではスマホ、フィーチャーフォンの両方対応がほとんどで、処理を共通化する為にSmarty等のサーバサイドのテンプレートエンジンを使う事で概ね問題なく対処できていたわけす。
フィーチャーフォン対応が不要なプロジェクトの場合にはAjaxで非同期にデータを取得&処理した方がユーザビリティの面でも、開発の分担の面でも色々都合が良い訳です。その上で取得してきたデータをjqueryでDOM要素を操作してコンテンツを作る事は出来ますが、開発の簡便さ&後々の保守性を考えると”DOM要素を操作しまくる”のは避けたい所です。
いくつか調べたところ良さそうだったのがhandlebars.js。
現在は2.0.0が最新版(2014年9月15日時点)となります。
http://handlebarsjs.com/

簡単なサンプルコード

https://gist.github.com/akifumi-kamata/aa78cbabb66f7fb9661b

ページ内でデータを追加取得する

ボタンを押すと初回読み込みのデータにレコードを追加します。
https://gist.github.com/akifumi-kamata/29ddd135c81b42677544
 
今回はボタン押下でデータ取得としていますが、 「画面の最下部までスクロールしたら追加でデータを取得する」などにも変更可能です。
また、データも固定の変数としていまが$.ajaxなど使って外部からデータを取得する様に書き換える事でより実用的になるかと思います。

次回予告?

プリコンパイルして使う

handlebars.jsは非プリコンパイルで使った場合に他のJSテンプレエンジンにくらべパフォーマンスが劣るとの事で、商用環境で使う場合にはプリコンパイルして使いたい訳です。
ただし、プリコンパイルする環境を作るのがちょっと面倒なのが難点です。。。

Helperを使う

基本的には”取得したデータをそのままはめ込む”で概ね問題ないのですが、ヘルパー関数を使う事で細かな表示処理はテンプレ側で吸収する事ができます。
時期未定ですが、プリコンパイル、Helperについても触れたいと思っています。

参考

こちら参考にさせて頂きました。ありがとう御座います!
Handlebars.jsの基本的な使い方のメモ

-JavaScript
-,

執筆者:

関連記事

AndroidのparseInt(javascript)で"01234"が668になる

var x = ‘01234’; var y = parseInt(x); console.log(y); // 668? 結論としては、Androidだけ文字列の先頭が”0″ …

JSテンプレートエンジンhandlebars.jsを使ってみる その2

以前のエントリ、JSテンプレートエンジンhandlebars.jsを使ってみるのその2です。 handlebarsはプリコンパイルして使わないとパフォーマンスに難点があるので、ぜひとも使いたい所です。 …

Androidブラウザでviewportのwidth指定(GALAXY 2.3系への対応)

Androidのviewport設定がバージョン依存や、端末依存の問題で最適化に困っていたところ以下のサイトを参考にさせて頂い対応していました。 続:Androidブラウザでviewportのwidt …

JavaScriptで遅延処理をさせる

遅延実行(タイマー処理)が必要な場合にはsetTimeoutを使用します。 setTimeout(function(){ /*処理の中身*/ },待機時間); 待機時間はミリ秒(1秒なら1000)で指 …

JavaScriptでundefinedと向き合ってみる

前回エントリのNaNの判定と趣はにていますが、今回はundefinedと向き合ってみます。 例えばPHPの場合には未定義の変数は”null”になりますが、JavaScriptの …