-
Notifications
You must be signed in to change notification settings - Fork 0
/
README
166 lines (122 loc) · 4.69 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
================================
Краткий ввод в Astral Templates.
================================
Перед началом.
==============
Нам понадобятся следующие скрипты:
* jQuery,
* astral/oo.js
* astral/queue/context.js
* astral/queue/queue.js
* astral/template/blocks.js
* astral/template/controls.js
* astral/template/tokens.js
* astral/template/lexer.js
* astral/template/helpers.js
* astral/template/template.js
Определяем загрузчик шаблонов.
------------------------------
Для примера мы создадим простую фунцию, берущую код шаблонов прямо из элементов страницы.
На практике вам скорее всего понадобится подгружать нужные шаблоны с помощью AJAX-запросов.
Code::
(function () {
var _templatesCache = {};
astral.template.Template.registerLoader(function (name, callback) {
if (!_templatesCache[name]) {
_templatesCache[name] = astral.template.Template.fromSource($('#'+name).html());
}
callback(_templatesCache[name]);
});
})();
Общая информация.
=================
Есть четыре типа тегов:
* ``<? ?>`` используются для конфигурирования шаблонных хелперов.
* ``<%= %>`` исользуются для вывода значения переменной (или целого выражения).
* ``<# #>`` используются для комментирования.
* ``<@ @>`` используются для вставки управляющих конструкций.
Управляющие конструкции.
------------------------
**each**
Синтаксис::
<@ each listName as varName @>
... здесь идёт код, работающий с varName ...
<@ endeach @>
**include**
Синтаксис::
<@ include "templateName" @>
Использует зарегистрированный загрузчик для загрузки и рендеринга шаблона, передавая данные текущего контекста.
**source**
Синтаксис::
<@ source @>
alert("It's a native JavaScript code here!");
<@ endsource @>
Позволяет вставить обычный javascript-код.
**call**
Синтаксис::
<@ call methodName @>
Вызывает метод ``methodName`` у зарегистрированного хелпера.
**super**
Ситаксис::
<@ super @>
Выводит результат выполнения одноименого метода базового шаблона.
Используется только внутри методов хелпера шаблона-расширения.
Создаём и проверяем шаблоны.
============================
Начнем с простого::
<script type="template/astral" id="simpleTemplate">
<ul>
<@ each items as item @>
<li><%= item.name %></li>
<@ endeach @>
</ul>
</script>
Теперь отрендерим его::
astral.template.Template.load('simpleTemplate', function (template) {
template.render('#simpleTemplateResult', {items: [
{name: 'First item'},
{name: 'Second item'}
]});
});
Запускаем и проверяем::
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Но такой шаблон не очень полезен: его невозможно переиспользовать.
Попробуем выделить фрагмент шаблона в отдельный метод::
<script type="template/astral" id="defTemplate">
<? def printItem ?>
<%= item.name %>
<? enddef ?>
<ul>
<@ each items as item @>
<li><@ call printItem @></li>
<@ endeach @>
</ul>
</script>
Обратите внимание на особые теги ``<? ?>``.
Результат рендеринга этого шаблона ничем не отличается от предыдущего.
Теперь сделаем шаблон-расширение::
<script type="template/astral" id="extendedTemplate">
<? extends "defTemplate" ?>
<? def printItem ?>
<a href="<%= item.href %>"><@ super @></a>
<? enddef ?>
</script>
И отрендерим его::
astral.template.Template.load('extendedTemplate', function (template) {
template.render('#extendedTemplateResult', {items: [
{name: 'First item name', href: "first_item_href"},
{name: 'Second item name', href: "second_item_href"}
]});
});
Проверяем::
<ul>
<li>
<a href="first_item_href">First item name</a>
</li>
<li>
<a href="second_item_href">Second item name</a>
</li>
</ul>