A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

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

      2014/10/06

以前のエントリ、JSテンプレートエンジンhandlebars.jsを使ってみるのその2です。

handlebarsはプリコンパイルして使わないとパフォーマンスに難点があるので、ぜひとも使いたい所です。

今回はプリコンパイルできる環境をつくります。

事前の準備

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

まずはhomebrewをインストールします。

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

handlebarsをインストール

本題のhandlebarsをインストールします。

実際に使ってみる

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

実際にはコマンドラインからでなく、phpstormのFileWacher機能を利用してプリコンパイルを自動化してます。ただし、若干タイムラグがあるので、開発中は使い勝手に若干難があります。そこで、開発中など頻繁に更新する場合はオリジナルのテンプレートを使い、商用環境ではプリコンパイルしたテンプレートを使う様に対応します。

実際の構成としては3つのファイルとなります。

smarty_template.tpl (smartyテンプレート)
sample.hbs (handlebarsテンプレート)
precompaled.js (precompaileテンプレートjsファイル)

hbsファイルを使うか、プリコンパイルテンプレートを使うかを切り替えるsmartyFunctionです。

smartyのテンプレートからは以下の様に呼び出します。

次回??

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

 

 

 

 - 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="">

  関連記事

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

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

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

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

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

結論としては、 …

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

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

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

いまま関わったプロジェクトではスマホ、フィーチャーフォンの両方対応がほとんどで、 …

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

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

javascript
JavaScriptで遅延処理をさせる

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

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

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