.. / 13. Шаблоны в ExtJS

ExtJS-4

Мода на изобретение шаблонизаторов, процветающая среди php-программистов плавно переползла в Python и Ruby, и 2-3 года назад в JavaScript. Я думаю, в скором будущем в JS следует ожидать портирования Smarty, Quicky,FastTemplate, TAL… и базаров, какой шаблонизатор лучше.

1. Первый шаблон

var d=['Путин', 'Владимир', 'Владимирович'];
var tpl= new Ext.Template(«<div class='domexample'><b>{0}</b> {1} {2}</div>»); tpl.append('ex1', d); tpl.append('ex1',['Медведев', 'Владимир', 'Владимир']);

Здесь наверное все прозрачно? В первой строке создается шаблон. Во втрой строке находится элемент c id='ex1', куда будет вставлен результат работы шаблона.
Затем в шаблон подставляюся данные из массива. {0} - первый элемент массива, {1} - второй и т.д. В результате получаем:

Так же как и в PHP-шаблонизаторах типа Smarty для ускорения работы шаблонов их можно «скомпилировать», т.е. перевети в какой-то внутренний объект, с помощь которого парсинг будет выполняться быстрее.

tpl.compile(); // «компиляция» шаблона tpl.append('ex2',['Жириновский', 'Владимир', 'Владимирович']);

Естественно, что можно парсить не только массивы но и литерально заданные объекты (JSON):

 var tpl3=new Ext.Template(«<div class='domexample'><b>{f}</b> {i} {o}</div>»);
  tpl3.append('ex3',{f:'Зюганов', i:'Владимир', o:'Владимирович'});

2. Циклы в шаблонах

Естественно, что в шаблонах предусмотрены циклы. По счастью, они сделаны не в виде JS-вставок, а а виде собственных тегов. Простой пример:

var data = {
        text: 'Президиум',
        member: [{name: 'Путин В.В.',   member: 'председатель партии «Единая Россия»',age:58},
                {name: 'Жириновский В.В.',      member: 'Генеральный секретарь ЛДПР',age:68},
                {name: 'Зюганов В.В.',          member: 'председатель Президиума ЦК КПРФ(б)',age:66}]
        };
var tpl4 = new Ext.XTemplate(
                                '<b>{text}:</b>',
                                '<tpl for=«member»>', // начало цикла для массива member
                                        '<p>{#}  {name} ({member})</p>',
                                '</tpl>'                  // конец цикла
                        );
tpl4.append('ex4',data);

3. Условные операторы в шаблонах

Точно так же как и циклы при помощи тегов <tpl> в шаблоны вводятся условия. Ниже приведен пример только одного шаблона. Из тех же данных что и в предыдущем примере введем ограничение по возрасту

var tpl5 = new Ext.XTemplate(
                                '<b>{text}:</b>',
                                '<tpl for=«member»>',             // начало цикла для массива member
                    '<tpl if=«age< 60»>',      //  ограничение по возрасту
                                        '<p>{#}  {name} ({member})</p>',
                    '</tpl>',
                                '</tpl>'                  // конец цикла
                        );

4. И еще

и еще в шаблонах наворочено много всякого - вычисление переменных, встроенные функции и т.п. До кучи в самом классе Ext.Template 22 метода. Но об этом лучше читать в документации.

События в ExtJS

2011-12-11
ExtJS-4

.. / 13. Шаблоны в ExtJS

1. Первый шаблон

2. Циклы в шаблонах

3. Условные операторы в шаблонах

4. И еще

Далее