Извините, тут пусто.
<div class="content">
<!--
Устанавливаем контейнеру обработчик события "init".
Он будет темплейтировать данные, которые придут
вместе с событием
В качестве шаблона будет взят template#tabContentTpl
-->
<e on="init" do="template">tabContentTpl</e>
<!-- Делаем вызов инструкций -->
<exec>
<!--
Запускаем событие "init", которому устанавливаем
JSON-объект в качестве данных
-->
<dispatch e="init">
{
"tabs":
[
{
"id": "fruit",
"name": "Фрукты",
"values": [ "Яблоки", "Сливы", "Апельсины" ]
},
{
"id": "vegetables",
"name": "Овощи",
"values": [ "Капуста", "Горох", "Морковь", "Тыква" ]
},
{
"id": "something",
"name": "Нечто"
}
]
}
</dispatch>
</exec>
</div>
<!-- Все темплейты должны находиться в данном контейнере -->
<template id="zTemplates">
<!-- Темплейт для отображения табов -->
<template id="tabContentTpl">
<div class="tabContainer">
<!--
Этот диспатчер будет запускать событие "tabActivate",
которое будет распростаняться от контейнера div.tabContainer
только на прямых потомков
-->
<dispatch id="tabActivator" e="tabActivate" p="childNodes"></dispatch>
<!-- Итерируем пришедшие с событием "init" данные.-->
<foreach from="tabs" item="tab">
<a href="#" class="tab">
<!--
Устанавливаем тегу <a> обработчик события "tabActivate"
по которому будем устанавливать класс "active"
если в пришедших с событием данных
будет присутствовать ключ, название которого
будет совпадать со значением атрибута "data-id"
-->
<e on="tabActivate" do="addClassIfAttrMatch">active,data-id</e>
<!--
Устанавливаем тегу <a> атрибут "data-id"
который равен "tab.id"
-->
<attr name="data-id"><value>tab.id</value></attr>
<!--
Устанавливаем тегу <a> обработчик
DOM-события "click"
-->
<handler on="click">
<!--
По которому будем запускать диспатчер с id
равным "tabActivator" (описан выше),
а в качестве параметров передадим JSON-объект
-->
<dispatch use="tabActivator">{ "<value>tab.id</value>": 1 }</dispatch>
</handler>
<!-- Выводим название таба -->
<value>tab.name</value>
</a>
<div class="tabContent">
<!--
Подключаем темплейт template#listTpl,
в который передадим данные таба
-->
<include tpl="listTpl"><value>JSON.stringify(tab)</value></include>
</div>
</foreach>
<exec>
<!--
Активируем таб путем запуска события "tabActivator",
которому передадим в качестве параметра id первого таба
-->
<dispatch use="tabActivator">{ "<value>tabs[0].id</value>": 1 }</dispatch>
</exec>
</div>
</template>
<template id="listTpl">
<!-- Если массив "values" не пустой -->
<if expr="values.length">
<!-- выводим его значения -->
<then>
<ul>
<foreach from="values" item="item">
<li><value>item</value></li>
</foreach>
</ul>
</then>
<!-- иначе выводим сообщение -->
<else>
<p>Извините, тут пусто.</p>
</else>
</if>
</template>
</template>