jquery.tmpl.jsのテンプレートを外部化して動的に読み込みつつレンダリングするには？

クライアントサイドのテンプレートエンジンは色々あるけれど、JSPに慣れた人間からするとjquery.tmpl.jsが一番わかりやすかった。

BorisMoore/jquery-tmpl · GitHub

ただ、このライブラリは開発が停止している。このライブラリをフォークして開発が続けられているのがこちららしい。

KanbanSolutions/jquery-tmpl · GitHub

こちらのサンプルを参考にすると本当に簡単にできた。

jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive

もはや、サーバーサイドのCPUを使ってHTMLをレンダリングする時代じゃないんだなというのを実感。

ただ、サンプル通りにやるとHTMLのコードが読みづらくなったりエディターでフォーマットしづらくなる。

その辺をどうにかしたいと思って簡単なサンプルアプリケーションを作ってみた。

「行を追加」というボタンをクリックするとlinesパラグラフに行番号と追加日時の行が追加されるというアプリケーション。この行のレンダリングにテンプレートエンジンを使う。


サンプルコード一式

HTMLのコードはこんな風。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>JSPライクにテンプレート</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="jquery.tmpl.js"></script>
    <script src="main.js"></script>
  </head>

  <body>
    <p><button onclick="addLine();">行を追加</button></p>
    <p id="lines"></p>
  </body>

</html>

ごらんの通り、HTMLにはテンプレートが含まれていない。ここが第１のポイント。

サンプルではHTMLの中にscriptタグを書いて、その中にテンプレートを書いているけれど、これだとエディターでフォーマットがしづらくなる。

そこでまず、行のテンプレートを_template.htmlというファイルに外部化する。外部化すればエディターでフォーマットしやすい。

<div><strong>${lineNum}.</strong> ${date}</div>

そして、この_template.htmlをHTTPのGETで動的に読み込む。そのためにはjQueryのgetが使える。ここが第２のポイント。

これはJSPで言えば「@ include file="_template.html"」的なものだ。

main.jsはこんな風。

//テンプレート
var $template = null;

//行番号
var lineNum = 0;


//初期化
$(document).ready(function() {

  //_template.htmlをHTTP GETで読み込んで$templateに代入
  $.get("_template.html", function(tmpl) { $template = tmpl; });

});


//行を追加するメソッド
function addLine() {

  //行番号インクリメント
  lineNum++;

  //置換に使うパラメーターオブジェクト作成
  var obj = new Object();
  obj.lineNum = lineNum;
  obj.date = new Date();

  //テンプレートをパラメーターオブジェクトの値で置換してlineのパラグラフに追加
  $.tmpl($template, obj).appendTo("#lines");

} // END addLine()

初期化後、ボタンをクリックするとaddLine()が呼び出されて、置換するパラメーターを作り、テンプレートエンジンでテンプレートを変換し、その変換された行がlinesパラグラフに追加される。

うん。これでスッキリ！

コメント

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか？

イメージ
日経14.06.08朝　芸術と科学のあいだ　１７　鏡文字に込めた天才の思惑　福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。まさに「万能人 (uomo universale)」。 レオナルド・ダ・ヴィンチ - Wikipedia 当然自分はダ・ビンチの足元にも及ばないが、いくつもの人工言語（プログラミング言語）を使うことができる。ひとつをマスターするのは大変だったが、ひとつマスターするとその他の言語にはかなりの共通点があるので、新しい言語を習得するのにそれほど時間がかからなくなったからだ。 いかに天才であったとしても生きられる時間は限られている。その限られた時間の中であれほどの多方面に渡る物事を習得できたのは、「すべてのものに共通する何か」を習得したからではないかと思うのだ。 自分の知る限り、その「すべてのものに共通する何か」を習得したのではないかと思える人物は、ダ・ビンチただ一人だ。 そのダ・ビンチの新たな側面を知った。山っ気というか、マーケティングにも興味があったようだ。 そのマーケティングには何らかのメディアが必要だ。やはり自分もダ・ビンチは活版印刷のために鏡文字を使っていた説に一票だ。 マーケティングへの興味という他にもう一つ根拠がある。ダ・ビンチが生まれたのが1452年。グーテンベルクの聖書が世界で初めて活版印刷でつくられたのが1455年。 グーテンベルク聖書 - Wikipedia つまり、ダ・ビンチが生きた時代は活版印...
続きを読む

macでsmb（samba）共有サーバーに別名で接続（別アカウント名で接続）する方法

macでsmb（samba）共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか？ Finder＞移動＞サーバーへ接続＞サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Windows7でネットワーク上の共有フォルダにアクセスする資格情報を保存するには？

イメージ
Windows7でネットワーク上の共有フォルダにアクセスする場合、通常IDとパスワードを求められる。Windows7ではこれを「資格情報」と呼んでいるようだ。 普通に入力してアクセスすることはできた。しかし問題は、 ログオフや再起動をすると、「資格情報を記憶する」をチェックしても毎回聞かれる ことだ。ネットで調べると、このような状況になる人は多いようだった。自分なりのログを書いておこうと思う。 普通に入力して共有フォルダにアクセスした後、「コントロールパネル」＞「ユーザーアカウントと家族のための安全設定」＞「資格情報マネージャ」を見るとこのようになっていた。何度も聞かれるのは、「常設」が「ログオンセッション」となっているためだろうとわかる。これをなんとかしなければならない。 そこで、まず「資格情報コンテナから削除」でこの資格情報を消してから、「Windows資格情報の追加」をする。普通に考えればこのように入力することになるだろう。 これで一度再起動した。しかし、これでもなぜか次のような画面が出て接続できなかった。 試行錯誤の結果、 ポイントはユーザー名を「サーバー名¥ユーザー名」とすること だとわかった。 こうして追加すると、このように「常設」が「エンタープライズ」になる。これで2度と聞かれなくなった。 このような苦労をしなくてもNASには普通に接続できたのだけれど、接続先がMacの共有フォルダだったのがいけなかったのだろうか。いまだに謎だ。
続きを読む