JavaScript のテンプレートエンジン Pure と jQuery

Ajax で取得した JSON データから、HTML 要素の適切な位置に値をセットしてくれるテンプレートエンジン Pure があります。
これは、JSON データの属性と対応するクラス名を持つ HTML 要素に、値の関連付けを行います。
テンプレート用の DOM 要素として、以下では li#list-template を用います。　また、テンプレート DOM 要素は .hidden クラスで要素が表示されないようにしておきます。

/* CSS */
.hidden {
  display: none;
}

<a> 要素のコンテンツに JSON データの name 属性をセットしたい場合、<a class="name"> とします。　また、<a> 要素の href 属性に JSON データの url 属性をセットしたい場合、<a class="url@href"> とします。

<!-- HTML -->
<ul id="mylist">
  <li id="list-template" class="hidden"><a class="name url@href"></a></li>
</ul>

<!-- Script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="./pure.js" type="text/javascript"></script>

// JSON (Ajax で取得するデータ)
{
  [
    {
      "name": "(´・ω・｀)",
      "url": "http://shobon"
    },
    {
      "name": "（＾ω＾ ）",
      "url": "http://booon"
    },
    {
      "name": "(｀・ω・´)",
      "url": "http://shakin"
    }
  ]
}

// jQuery
$(document).ready(function () {
  var uri = '/json/search?callback=?'  // JSONP
  $.getJSON(uri, {q: 'xxx'}, function(json) {
    if (!json) {  // JSON データの取得に失敗
      return false;
    }
    var $target = $('#mylist');  // データの追加先
    $.each(json, function(index) {
      var jsonElement = json[index];
      // テンプレートから作成した要素をターゲット(ul#mylist)に追加していく
      var $template = $('#list-template')
        .clone()  // テンプレートの複製
        .attr('id', '')
        .autorRender(jsonElement)  // Pure テンプレートエンジンの実行
        .removeClass('hidden');  // 要素の表示
      $template.appendTo($target);
    });
  });
});

テンプレートエンジン実行後の ul#mylist は以下のようになります。
実行後、クラス名 url@href は url に変換されるようです。

<!-- HTML -->
<ul id="mylist">
  <li id="list-template" class="hidden"><a class="name url@href"></a></li>
  <li id="" class=""><a class="name url" href="http://shobon">(´・ω・｀)</a></li>
  <li id="" class=""><a class="name url" href="http://booon">（＾ω＾ ）</a></li>
  <li id="" class=""><a class="name url" href="http://shakin">(｀・ω・´)</a></li>
</ul>