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

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. Все