IT戦記

2007-01-10

JsonML を使う高速テンプレートエンジン「JsonML.Template」

というのを作ってみた

JsonML とは

JSON を使ったマークアップ言語です。

http://jsonml.org/

使いかた

// テンプレートの作成
// <div class="section"><h2>タイトル</h2><p>本文本文本文</p></div>
var t = $T(['div',
  {class: 'section'},
  ['h2', 'タイトル'],
  ['p', '本文本文本文本文']
]);

// 要素の生成
document.body.appendChild(t()); // 呼び出すだけ

// テンプレートの作成
var t = $T(['div',
  {class: 'section'},
  ['h3', function(c){return c.getVar('title')}], // タイトルを動的に生成
  ['p', function(c){return c.getVar('content')}] // コンテンツを動的に生成
]);

button.onclick = function(title, content) {
  document.body.appendChild(t({title: title, content: content})); // 変数付きで呼び出す
};

詳しくは、このリンクを参照してください。

http://usrb.in/amachang/wiki/JsonML.Template

Permalink | コメント(5) | トラックバック(1) | 15:48

コメント一覧

tk 2007/01/10 18:35 c.getVar(’title’)　を c.title　にはできないんだよね

amachang 2007/01/10 19:04 変数にスコープを作ってしまったので、出来ないんです。。。

やっぱりそっちの方が便利ですよね。

tk 2007/01/11 23:48 連想配列で abc.def.hij で深い階層まで自由にアクセスできるとJSONっぽくてよくね？
prototype.js　1.5の templateも１階層目までしか取れないので不便でした。

amachang 2007/01/12 00:28 c.getVar(’abc’).def.hij とは出来るのですがダメでしょうか。

tk 2007/01/13 12:52 あ、それでもいいかも。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

トラックバック - http://d.hatena.ne.jp/amachang/20070110/1168411701

リンク元