Простой шаблонизатор для js приложений

Очень простая функция для выполнения шаблонизации есть вот здесь.
Посмотреть пример онлайн
Пример функции шаблонизатора:
(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
        "with(obj){p.push('" +
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    return data ? fn( data ) : fn;
  };
})();
Использование в HTML
<script type="text/html" id="item_tmpl">
   <div class="sizes">
       <% for(var i=0; i < sizes.length; i++) { %>
       <div class="size__item">
           <%= sizes[i]["count"] %>
       </div>
       <% } %>
   </div>
</script>
   <div id="result">
   </div>
Настройка перед первым вызовом
var results = document.getElementById("result"),
dataObject = {
   sizes: [
      {
         count: 2
      },
      {
         count: 3
      },
      {
         count: 4
      }
  ]
};
results.innerHTML = tmpl("item_tmpl", dataObject);

Комментарии

Популярные сообщения из этого блога

Установка утилиты yandex disk для ubuntu

Отправка пост запроса AngularJS