Jaml: HTML билдр аля Haml

Опубликовано TermiT Янв 21, 2010 в JavaScript |

Существует большое количество HTML билдеров (упрощающих написание HTML разметки). Эд Спенсер (новый лидер Ext JS) предложил еще один способ получать HTML используя JavaScript, который очень напоминает Haml знакомый разработчикам на Ruby (смотрите также Shaml,  LessCss, CleverCSS)

Пример использования Jaml:

JavaScript:
  1. div(
  2.   h1(«Some title»),
  3.   p(«Some exciting paragraph text»),
  4.  
  5.   br(),
  6.  
  7.   ul(
  8.     li(«First item»),
  9.     li(«Second item»),
  10.     li(«Third item»)
  11.   )
  12. );

Также можно писать шаблоны следующим образом:

JavaScript:
  1. Jaml.register('product', function(product) {
  2.   div({cls: 'product'},
  3.     h1(product.title),
  4.     p(product.description),
  5.     img({src: product.thumbUrl}),
  6.     a({href: product.imageUrl}, 'View larger image'),
  7.  
  8.     form(
  9.      label({'for': 'quantity'}, «Quantity»),
  10.       input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
  11.       input({type: 'submit', value: 'Add to Cart'})
  12.     )
  13.   );
  14. });

Git репозиторий Jaml

Оригинал