Шаблонизация

 Шаблонизация

B827d6cfdfbcfce33700b0e6cc03e344?s=128

Mikhail Davydov

November 26, 2012
Tweet

Transcript

  1. None
  2. Михаил Давыдов Разработчик JavaScript Шаблонизаторы

  3. 3 var parent = document.createElement('div'); for (var i = 0;

    i < 10; i++) { var item = document.createElement('div'); item.setAttribute('class', 'item'); item.appendChild(document.createTextNode('Pewpew')); parent.appendChild(item); } document.getElementById('container').appendChild(parent); Шаблоны на DOM методах
  4. 4 // ЛОЛШТО??? item.appendChild (document.createTextNode ('Pewpew'));

  5. 5 Короче никак??? // <div>Pewpew</div>

  6. 6 var html = '<div>'; for (var i = 0;

    i < 10; i++) { html += '<div class="item">Pewpew</div>'; } html += '</div>'; document.getElementById('container') .innerHTML = html; Шаблоны на строках
  7. 7 Ну вот - другое дело! .innerHTML = html; <3

  8. 8 Код и данные смешиваются с шаблонами. Можно ли иначе?

  9. 9 Шаблонизаторы FTW!

  10. 10 <div> {{do n.times}} <div class="item">Pewpew</div> {{/do}} </div> // Юзаем

    TemplateEngine.render(template, { n: 10 }) .appendTo('#container'); Шаблоны на шаблонах!
  11. 11 Красота!

  12. 12 Шаблонизаторы •  http://ejohn.org/blog/javascript-micro- templating/ •  http://api.jquery.com/jquery.tmpl/ •  http://mustache.github.com/mustache.5.html еще

    OVER 900 http://goo.gl/aoM8b
  13. Все