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

Transcript

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