A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

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

      2014/10/06

いまま関わったプロジェクトではスマホ、フィーチャーフォンの両方対応がほとんどで、処理を共通化する為にSmarty等のサーバサイドのテンプレートエンジンを使う事で概ね問題なく対処できていたわけす。

フィーチャーフォン対応が不要なプロジェクトの場合にはAjaxで非同期にデータを取得&処理した方がユーザビリティの面でも、開発の分担の面でも色々都合が良い訳です。その上で取得してきたデータをjqueryでDOM要素を操作してコンテンツを作る事は出来ますが、開発の簡便さ&後々の保守性を考えると”DOM要素を操作しまくる”のは避けたい所です。

いくつか調べたところ良さそうだったのがhandlebars.js。

現在は2.0.0が最新版(2014年9月15日時点)となります。

http://handlebarsjs.com/

簡単なサンプルコード

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

ボタンを押すと初回読み込みのデータにレコードを追加します。

 

今回はボタン押下でデータ取得としていますが、 「画面の最下部までスクロールしたら追加でデータを取得する」などにも変更可能です。

また、データも固定の変数としていまが$.ajaxなど使って外部からデータを取得する様に書き換える事でより実用的になるかと思います。

次回予告?

プリコンパイルして使う

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

Helperを使う

基本的には”取得したデータをそのままはめ込む”で概ね問題ないのですが、ヘルパー関数を使う事で細かな表示処理はテンプレ側で吸収する事ができます。

時期未定ですが、プリコンパイル、Helperについても触れたいと思っています。

参考

こちら参考にさせて頂きました。ありがとう御座います!

Handlebars.jsの基本的な使い方のメモ

 - JavaScript ,

STINGERレクタングル大

STINGERレクタングル大

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

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

以前のエントリ、JSテンプレートエンジンhandlebars.jsを使ってみるの …

javascript
Javascriptの基本的な事を改めてメモ

最近Javascriptを触る機会が多くなり、つい忘れがちな基本をメモ。 型変換 …

javascript
JavaScriptでオブジェクトの要素数を取得する

JavaScriptでオブジェクトの要素数を取得します。   関連

javascript
JavaScriptでNaN(Not a Number)を判定して適切に処理する

引数や入力された値などをintなど数値にキャストする際に予期せぬ値が入っていると …

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

Androidのviewport設定がバージョン依存や、端末依存の問題で最適化に …

javascript
JavaScriptで遅延処理をさせる

遅延実行(タイマー処理)が必要な場合にはsetTimeoutを使用します。 se …

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

結論としては、 …

javascript
JavaScriptでundefinedと向き合ってみる

前回エントリのNaNの判定と趣はにていますが、今回はundefinedと向き合っ …