最近使ったライブラリ

JsonML

決められたJSON（JSONML=JSONマークアップ言語）からHTML要素を生成するライブラリ。

公式

JsonML.org

参考

IT戦記 JsonML を使う高速テンプレートエンジン「JsonML.Template」
IBM developerWorks Japan JsonML の紹介

具体例

JsonML.parseにJSONを食べさせるとElementが帰ってくるからappendChildかinnerHTMLする。

まずはJSONMLで定義。onclickとかも設定できる。

var BnfGrammar = [
  "div",
  {"id":"main"},
  ["div",
    {"id":"header"},
    "ヘッダーです。"
  ],
  ["div",
    {"id":"body"},
    ["div",
      {"id":"menu"},
      ["div",
        {"class":"button1"},
        {"onclick":function(){
          alert("ボタン1です。");
        }},
        "ボタン1"
      ],
      ["div",
        {"class":"button2"},
        {"onclick":function(){
          alert("ボタン2です。");
        }},
        "ボタン2"
      ]
    ]
  ],
  ["div",
    {"id":"footer"},
    "Copyright(C) 2009 hogehoge. All Rights Reserved."
  ]
];

次に定義したJSONMLをHTMLに変換。

var UI = JsonML.parse(BnfGrammar, function (elem) {
  if (elem.className.indexOf("Remove-Me") >= 0) {
    return null;
  }
  
  if (elem.tagName && elem.tagName.toLowerCase() === "a" &&
    elem.className.indexOf("External-Link") >= 0) {
    elem.onclick = function(evt) {
      window.open(elem.href); return false;
    };
    
  } else if (elem.className.indexOf("Fancy-Widgit") >= 0) {
    FancyWidgit.bindDOM(elem);
  }
  return elem;
});

document.body.appendChild(UI);

逆にXMLやXHTMLをJsonに出来るメソッドもある。

残念なのは、メソッド一覧などのドキュメントが不足してること。デモとソースを解析するしか手だてはなさそう。