A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

JavaScript

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

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

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

事前の準備

npmでインストールするので、node.jsとnode.jsを入れる為にhomebrewをインストールします。
まずはhomebrewをインストールします。

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"

node.jsをインストールします。

$ brew install node

handlebarsをインストール

本題のhandlebarsをインストールします。
$ sudo npm install -g handlebars
/usr/local/bin/handlebars -> /usr/local/lib/node_modules/handlebars/bin/handlebars

実際に使ってみる

コマンドラインからプリコンパイルを実行します。

$ handlebars sample.hbs -e 'hbs' -m -f sample.js

実際にはコマンドラインからでなく、phpstormのFileWacher機能を利用してプリコンパイルを自動化してます。ただし、若干タイムラグがあるので、開発中は使い勝手に若干難があります。そこで、開発中など頻繁に更新する場合はオリジナルのテンプレートを使い、商用環境ではプリコンパイルしたテンプレートを使う様に対応します。
実際の構成としては3つのファイルとなります。
smarty_template.tpl (smartyテンプレート)
sample.hbs (handlebarsテンプレート)
precompaled.js (precompaileテンプレートjsファイル)
hbsファイルを使うか、プリコンパイルテンプレートを使うかを切り替えるsmartyFunctionです。
https://gist.github.com/akifumi-kamata/f3dbe6dc599d30fcdd57
smartyのテンプレートからは以下の様に呼び出します。

{handlebarsDisplay template=$HBS_NAME values='datas' output='#contentsData' usePreCompile=$usePreCompileTemplate}

次回??

基本的にはロジックレス(渡された値を表示するだけ)として使っているので、ヘルパーも作らず使っているのですが、良いものあれば紹介していきたいです。
 
 
 

-JavaScript
-, ,

執筆者:

関連記事

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

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

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

引数や入力された値などをintなど数値にキャストする際に予期せぬ値が入っているとNaN(Not a Number)になり、処理が想定通りに進まない事がおこります。 https://gist.githu …

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

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

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

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

PyCharmでES6対応する

PyCharmでjavascript(node.js)を変更しようとしたら構文は問題ないのにエディタ上の表示がエラー扱いでどうも使いにくい状況でした。 間違ってないけどエラー扱い 省略系のダブルアロー …