忍者ブログ

2018
04
24

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/04/24 (Tue.)

2013
03
31

シンプルな JavaScript テンプレート・エンジン - jTemplate

JavaScript で利用できるテンプレート・エンジンは、後記のものが有名なようです。でも、自作したほうが利用しやすい場合もあります。自分が利用する機能に絞れば、コードもわかりやすく、軽量なものにできます。

そこで作成したものが、シンプルな JavaScript テンプレート・エンジン - jTempalte

テンプレート変数は、デフォルトでは、PHP のSmarty風の次のようなものを想定しています。

$template ="
<div class="item">
<h4>{$name}</h4>
<p>{$text}</p>
</div>
"

データは、次のようなオブジェクト(連想配列)です。

$values={
 "name" : "NAME",
 "text" : "TEXT",
}

jTemplate関数は、次のように記述します。

$str = jTemplate($template, $values);

変換後は、次のようになります。

$str ="
<div class="item">
<h4>NAME</h4>
<p>TEXT</p>
</div>
"

テンプレート変数が上記以外にも対応しています。

$template ="
<div class="item">
<h4>{%name%}</h4>
<p>{%text%}</p>
</div>
"

このようにテンプレート変数が上記以外の場合は、第3引数を与えます。

// ver.0.0
$str = jTemplate($template, $values,['{%','%}']);
// ver 0.1.0
$str = jTemplate($template, $values,'{%*%}');

ユーティリティとして、テキストファイルの読み込み、JSON風テキストのオブジェクト化も用意しています。

$str = jTemplate($str,$values,$formats);
$str = jTemplate.load($filepath);
$str = jTemplate.render($filepath,$values,$formats);
$obj = jTemplate.json_decode($JSON);

HTML文書本体とテンプレートファイル、データファイルを分離して管理できます。

【参考】JavaScript テンプレート・エンジン

※ infinite loop「クライアントサイドで動くJavaScript Template Engine7つ」 より。

PR

2013/03/31 (Sun.) Comment(1) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

改良版 jTemplate 0.1.1 が公開されました。
寝太郎

jTemplate URL 2013/04/15 (Mon.) 13:35 edit

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

03 2018/04 05
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア