9. Многообразие видов
• Семантика
– интерполяция строк
"Шоколад ни в чем не виноват, %username%."
9
10. Многообразие видов
• Задачи
• Семантика
– интерполяция строк
-Mustache
-Handlebars
-Dust
-Jade
-…
10
11.
12. Многообразие видов
• Задачи
• Семантика
– интерполяция строк
– data bind
12
13. Многообразие видов
• Семантика
– data bind
var html = 'Шоколад ни в чем не виноват,'
+ '<span class="name"/>.'
, data = { username: 'John Smith' }
, map = plates.Map();
map.class('name').to('username');
plates.bind(html, data, map);
13
14. Многообразие видов
• Семантика
– data bind
-Flatiron.js templates
-Transparency
-Angular.js
-Pure
14
15.
16. Многообразие видов
• Задачи
• Семантика
– интерполяция строк
– data bind
– live data bind
16
17. Многообразие видов
• Задачи
• Семантика
– интерполяция строк
– data bind
– live data bind
-Knockout.js
17
18.
19. Многообразие видов
• Задачи
• Семантика
– интерполяция строк
– data bind
– live data bind
– data driven
19
20. Многообразие видов
• Семантика
– data driven
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>
20
21. Многообразие видов
• Семантика
– data driven
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>
Шоколад ни в чем не виноват, <username>John Smith</username>.
Вы просто созданы для лепрозория, <username>veged</username>!
21
22. Многообразие видов
• Семантика
– data driven
Шоколад ни в чем не виноват, <span class="name">John Smith</span>.
Вы просто созданы для лепрозория, <span class="name">veged</span>!
22
23. Многообразие видов
• Задачи
• Семантика
– интерполяция строк
– data bind
– live data bind
– data driven
-XSLT
-BEMHTML
23
26. Многообразие видов
• Задачи
• Семантика
• Синтаксис
– текст в финальном виде + вставки
26
27. Многообразие видов
• Синтаксис
– текст в финальном виде + вставки
<span class="name">[% username %]</span>
27
28. Многообразие видов
• Задачи
• Семантика
• Синтаксис
– текст в финальном виде + вставки
– сокращённый синтаксис
28
29. Многообразие видов
• Синтаксис
– текст в финальном виде + вставки
– сокращённый синтаксис
span.name #{username}
29
30. Многообразие видов
• Задачи
• Семантика
• Синтаксис
– текст в финальном виде + вставки
– сокращённый синтаксис
– предметно-ориентированный синтаксис
30
31. Многообразие видов
• Синтаксис
– текст в финальном виде + вставки
– сокращённый синтаксис
– предметно-ориентированный синтаксис
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>
31
32. Многообразие видов
• Синтаксис
– текст в финальном виде + вставки
– сокращённый синтаксис
– предметно-ориентированный синтаксис
var html = 'Шоколад ни в чем не виноват,<span class="name"/>.'
, data = { username: 'John Smith' }
, map = plates.Map();
map.class('name').to('username');
plates.bind(html, data, map);
32
