最近使ったライブラリ

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に出来るメソッドもある。

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