JsonML
決められたJSON(JSONML=JSONマークアップ言語)からHTML要素を生成するライブラリ。
公式
具体例
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);
残念なのは、メソッド一覧などのドキュメントが不足してること。デモとソースを解析するしか手だてはなさそう。