Шаблонирование JavaScript — это отличная идея: она позволяет вам легко конвертировать JSON в HTML, не анализируя его. На конференции Microsoft MIX10 они объявили, что начинают вносить вклад в команду jQuery. Одним из их усилий является создание шаблонного плагина . В этом кратком совете я покажу вам, как его использовать!
Вам понадобятся данные для шаблона; вы, вероятно, получите JSON с вашего сервера; конечно, литералы Object / Array работают так же хорошо, так что вот что мы используем:
|
1
2
3
4
5
6
7
8
|
var data = [
{ name : «John», age : 25 },
{ name : «Jane», age : 49 },
{ name : «Jim», age : 31 },
{ name : «Julie», age : 39 },
{ name : «Joe», age : 19 },
{ name : «Jack», age : 48 }
];
|
Шаблон написан в тегах <script type="text/html"></script> ; для каждого элемента в вашем JSON шаблон будет отображать HTML; затем он вернет вам весь HTML-фрагмент. Мы можем получить значения JavaScript из шаблона, используя {% и%} в качестве тегов. Мы также можем выполнять обычный JavaScript внутри этих тегов. Вот наш шаблон:
|
1
2
3
4
5
6
7
|
<li>
<span>{%= $i + 1 %}
<p><strong>Name: </strong> {%= name %}</p>
{% if ($context.options.showAge) { %}
<p><strong>Age: </strong> {%= age %}</p>
{% } %}
</li>
|
Чтобы отобразить данные с помощью шаблона, вызовите плагин; передать данные в метод плагина; Вы также можете при желании передать объект параметров. (Это не предопределенные параметры; это значения, которые вы хотите использовать в шаблоне, возможно, для ветвления.)
|
1
|
$(«#listTemplate»).render(data, { showAge : true }).appendTo(«ul»);
|
Это так просто! Веселитесь с этим! Вы можете получить полный код этого быстрого совета на Github