Оригинал статьи также доступен в блоге автора.

В не столь давно вышедшей версии jQuery 1.7 появился новый объект Callbacks, о котором сегодня и пойдёт речь.
В официальной документации jQuery.Callbacks описан, как многоцелевой объект, представляющий собой список функций обратного вызова (callbacks – далее просто колбэков) и мощные инструменты по управлению этим списком.

Я просматривал возможности этого объекта, когда он был ещё только в разработке, и надо сказать, что возможностей у него изначально было немного больше, чем осталось в релизной версии. Например, сейчас отсутствует возможность создания очереди (queue) колбэков, которые вызываются по одному на каждый вызов fire(). Видимо, команда jQuery, решила немного подсократить код, убрав «ненужные/редкоиспользуемые» возможности, чтобы сэкономить в весе библиотеки. Это маленький экскурс в историю Callbacks, но далее я буду описывать только доступные сейчас функции и в конце напишу небольшое возможное улучшение этого объекта.

Назначение

Прежде чем приступить к подробному изучению этого нового объекта jQuery.Callbacks, хочу остановиться на том, для чего же вообще нужен этот объект. Довольно часто в JavaScript коде используются колбэки – функции, которые вызываются при наступлении некоторого события, например, после завершения какого-то действия, самым ярким примером может послужить запрос AJAX. И при этом часто возникает потребность вызвать не одну функцию, а сразу несколько (заранее неизвестно сколько, может быть пару, может быть пару десятков, а может вообще ни одной) – это известный и простой паттерн «Наблюдатель». И вот для таких случаев и оказывается полезен рассматриваемый объект jQuery.Callbacks. В самом jQuery этот объект используется (начиная с версии 1.7) внутри jQuery.Deferred и jQuery.ajax. Также авторы jQuery сделали этот объект общедоступным и задокументировала его, чтобы другие разработчики могли его использовать при реализации собственных компонентов.

Конструктор: jQuery.Callbacks(flags)

Вызовом конструктора создаётся объект callbacks, который имеет ряд методов для управления списком колбэков.
Параметр flags необязательный и позволяет задать параметры работы объекта, возможные значения параметра мы рассмотрим ниже.

var callbacks = $.Callbacks();

К созданному объекту callbacks мы сможем теперь добавлять функции-колбэки в список, удалять их, вызывать, снова вызывать (если это не было запрещено при создании объекта), проверять статус объекта (был ли уже вызов или ещё нет) с помощью таких методов объекта, как add(), remove(), fire() и пр. Выполняются колбэки, кстати, в порядке их добавления в список.

Отмечу, что это не «настоящий» конструктор экземпляра класса, поэтому использовать оператор new при его вызове не требуется (и даже бессмысленно).

По этой причине не получится проверить, является ли объект экземпляром Callbacks, способом, стандартным для JS:

if (obj instanceof $.Callbacks) {
    obj.add(fn);
}

Выражение под if всегда возвращает false. Но можно положиться на один из известных методов этого объекта (или сразу на несколько), например, можно проверить так:

if (obj.fire) {
    obj.add(fn);
}

На самом деле, внутри этой функции создаётся обычный JS-объект с определённым набором методов, которые опираются на своё замыкание – это довольно распространённый в JavaScript способ задания приватных (private) переменных, недоступных вне этого псевдоконструктора.

Также, благодаря такому псевдоконструктору, методы этого объекта никак не зависят от контекста вызова – объекта, которому они принадлежат, а это значит, что их можно смело присваивать в свойства другого объекта, не заботясь о смене контекста, – всё по прежнему будет работать корректно. Это справедливо для всех методов, кроме fire, он как раз таки зависит от контекста, но использует его в качестве контекста выполнения колбэков из списка, т.е. этот метод в ряде случаев не просто можно, а именно нужно присваивать свойствам другого объекта со сменой контекста. Например:

var c = $.Callbacks(), obj = {};
obj.register = c.add;
obj.register(function() { console.log('fired'); });
c.fire();
// output: 'fired'

Флаги

Примечание: далее по тексту под словами «вызов метода fire()» понимается вызов выполнения колбэков из списка в том числе и методом fireWith().

Параметр конструктора flags – это строка, в которой через пробел можно указать флаги – опции, в соответствии с которыми будет работать созданный объект callbacks. Поддерживаются такие флаги:

once – указывает, что список колбэков может быть выполнен только единожды, второй и последующие вызовы метода fire() будут безрезультатны (как это сделано в объекте deferred), если этот флаг не указан, то можно несколько раз вызывать метод fire().

memory – указывает, что необходимо запоминать параметры последнего вызова метода fire() (и выполнения колбэков из списка) и немедленно выполнять добавляемые колбэки с соответствующими параметрами, если они добавляются уже после вызова метода fire() (как это сделано в объекте deferred).

unique – указывает, что каждый колбэк может быть добавлен в список только один раз, повторная попытка добавить колбэк в список ни к чему ни приведёт.

stopOnFalse – указывает, что нужно прекратить выполнение колбэков из списка, если какой-то из них вернул false, в пределах текущей сессии вызова fire(). Следующий вызов метода fire() начинает новую сессию выполнения списка колбэков, и они будут выполняться опять до тех пор, пока один из списка не вернёт false либо пока не закончатся.

Методы

Ниже я приведу список методов с кратким описанием, примеры есть в официальных доках и для некоторых методов в следующем разделе. В общем-то методы довольно просты и ведут себя вполне ожидаемо.

callbacks.add(callbacks) returns: callbacks – добавляет в список колбэки, можно одновременно передавать в аргументах этого метода несколько функций (несколько аргументов) или массивов функций (можно одновременно и то и другое), можно даже вложенные массивы передавать. Все аргументы (или элементы массива), не являющиеся функциями, просто игнорируются. Метод (этот и некоторые далее) возвращает контекст своего вызова, позволяя тем самым организовать цепочку вызовов нескольких методов одного объекта подряд, как это принято в jQuery.

callbacks.remove(callbacks) returns: callbacks – удаляет колбэки из списка, причем даже если колбэк был добавлен дважды, удаление его произойдёт с обеих позиций. Т.о. если вызвать метод удаления некоторого колбэка из списка, то можно быть уверенным, что его в списке больше нет, сколько бы раз его не добавляли. Можно передавать несколько функций одновременно как несколько аргументов, массивы передавать нельзя, все аргументы не функции игнорируются.

callbacks.has(callback) returns: boolean – проверяет, есть ли указанная функция в списке колбэков.

callbacks.empty() returns: callbacks – очищает список колбэков.

callbacks.disable() returns: callbacks – «отключает» объект callbacks, все действия с ним будут безрезультатны. При этом перестают работать вообще все методы: add – ни к чему не приводит, has – всегда возвращает false и пр.

callbacks.disabled() returns: boolean – проверяет, отключен ли объект callbacks, после вызова disable() будет возвращать true.

callbacks.lock() returns: callbacks – фиксирует текущее состояние объекта callbacks относительно параметров и состояния выполнения списка колбэков. Этот метод актулен при использовании флага memory и предназначен для блокирования только последующих вызовов fire(), в остальных случаях он равносилен вызову disable().

Детально этот метод работает так: если флаг memory не указан или ещё ни разу не был вызван метод fire() или последняя сессия выполнения колбэков была прервана возвратом false одним из них, то вызов lock() равносилен вызову disable() (именно он и вызывается внутри) и вызов disabled() в таком случае вернёт true, иначе будут заблокированы только последующие вызовы fire() – они не приведут ни к выполнению колбэков, ни к изменению параметров выполнения добавляемых колбэков (при наличии флага memory).

callbacks.locked() returns: boolean – проверяет, зафиксирован ли объект callbacks методом lock(), также верёт true после вызова disable().

callbacks.fireWith( [context] [, args] ) returns: callbacks – запускает выполнение всех колбэков в списке с указанным контекстом и аргументами. context – указывает контекст выполнения колбэка (объект, доступный через this внутри функции). args – массив (именно массив) аргументов, передаваемых в колбэк.

callbacks.fire( arguments ) returns: callbacks – запускает выполнение всех колбэков в списке с контекстом вызова и аргументами этого метода. arguments – список аргументов (не массив, как в методе fireWith()). Т.е. контекстом вызова и аргументами колбэков будут контекст и аргументы метода fire().

Пример, как можно эквивалентно запустить исполнение колбэков с одинаковыми параметрами и контекстом:

var callbacks = $.Callbacks(),
    context = { test: 1 };
callbacks.add(function(p, t) { console.log(this.test, p, t); });

callbacks.fireWith(context, [ 2, 3 ]);
// output: 1 2 3

context.fire = callbacks.fire;
context.fire(2, 3);
// output: 1 2 3

Колбэки из списка выполняются в том порядке, в котором они в этот список добавлялись. После выполнения колбэков при указанном флаге once список будет очищен, а если при этом не указан флаг memory или выполнение колбэков было прервано возвратом false, то объект callbacks будет отключен методом disable().

Примеры

Давайте посмотрим как работают флаги на примерах. Во всех примерах используются такие функции:

function fn1( value ){
    console.log( value );
}

function fn2( value ){
    fn1("fn2 says:" + value);
    return false;
}

$.Callbacks():

var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
bar
fn2 says:bar
bar
foobar
foobar
false
*/

Никакие флаги не указали – вполне ожидаемое поведение.

$.Callbacks(‘once’):

var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
true
*/

Тут всё понятно – один раз выполнили, что было, далее ничего не происходит, что ни делали, т.к. список уже отключен.

$.Callbacks(‘memory’):

var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
fn2 says:foo
foo
bar
fn2 says:bar
bar
foobar
foobar
false
*/

Здесь, вроде, тоже ничего сложного – после первого выполнения каждое добавление колбэка вызывает его немедленное выполнение, а потом снова вызываем выполнение всего списка. При этом одну функцию мы добавили в список дважды – она дважды и срабатывает.

$.Callbacks(‘unique’):

var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
bar
fn2 says:bar
foobar
false
*/

А в этом случае повторное добавление функции fn1 было проигнорировано.

$.Callbacks(’stopOnFalse’):

var callbacks = $.Callbacks( "stopOnFalse" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
bar
fn2 says:bar
foobar
foobar
false
*/

Колбэк fn2 прерывает цепочку выполнения, т.к. возвращает false.

Это простые примеры, а теперь давайте попробуем поиграться с комбинациями флагов – будет немного интереснее:

$.Callbacks(‘once memory’):

var callbacks = $.Callbacks( "once memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
fn2 says:foo
foo
false
*/

Видим, что сработали только первый fire() и добавление новых колбэков привело к их немедленному выполнению с параметрами первого fire().

$.Callbacks(‘once memory unique’):

var callbacks = $.Callbacks( "once memory unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
fn2 says:foo
foo
false
*/

Здесь результат тот же, несмотря на то, что мы указали флаг unique и дважды добавляем fn1, – второй раз добавление этой функции в список сработало, потому что при указанном флаге once после выполнения колбэков список очищается, а флаг memory указывает, что последующие добавления колбэков будут приводить к их немедленному выполнению без помещения в список, а так как список пуст – то добавление любой функции всегда уникально. Но этот флаг сыграет свою роль при попытке добавить за раз несколько колбэков, среди которых есть дублирующиеся, если в предыдущем коде изменить 4-ю строку как показано ниже, то fn2 всё равно выполнена будет только один раз (а без флага unique была бы выполнена три раза):

callbacks.add( fn2, fn2, fn2 );

$.Callbacks(‘once memory stopOnFalse’):

var callbacks = $.Callbacks( "once memory stopOnFalse" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.add( fn1 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
console.log(callbacks.disabled());

/*
output:
foo
fn2 says:foo
true
*/

Возврат false заблокировал все дальнейшие выполнения колбэков и при наличии флага once вообще привёл к отключению объекта callbacks.

Я не буду рассматривать все возможные комбинации флагов, я постарался выбрать наиболее интересные (не совсем простые) и объяснить поведение callbacks. Остальные комбинации можно протестировать самостоятельно, например, воспользовавшись заготовкой: http://jsfiddle.net/zandroid/JXqzB/

Обещанное улучшение

Улучшение, конечно, совсем не обязательное и даже, может быть, в какой-то степени надуманное, не судите строго.
Идея улучшения в том, чтобы опустить вызов метода fire(), а вместо этого сам объект callbacks использовать как функцию. Для этого пишем такую функцию:

(function($, undefined){
    $.FCallbacks = function(flags, fns) {
        var i = $.type(flags) === 'string' ? 1 : 0,
            callbacks = $.Callbacks(i ? flags : undefined);
        callbacks.add(Array.prototype.slice.call(arguments, i))
        return $.extend(callbacks.fire, callbacks, { fcallbacks: true });
    };
})(jQuery);

И без лишних слов посмотрим пример использования:

function fn1(p1, p2) { console.log('fn1 says:', this, p1, p2); }
function fn2(p1, p2) { console.log('fn2 says:', this, p1, p2); }
var callbacks = $.FCallbacks('once', fn1, fn2);
callbacks.add(fn2);
callbacks(2, 3);

Также ещё у нового «конструктора» появилась возможность сразу же передавать начальные колбэки в параметрах, без лишнего вызова add().
Ну и в работе: http://jsfiddle.net/zandroid/RAVtF/

Реальное использование

Предвидя некоторые комментарии по поводу реальных примеров использования (и получив их уже в другом месте публикации этой статьи) сразу постараюсь на них ответить.

Callbacks на самом деле теперь используется очень многими пользователями jQuery 1.7+ и был реализован командой разработчиков не просто, потому что им захотелось сделать новый фичер.

Давно в библиотеке был реализован метод $.ajax(), который по своей природе не что иное, как надстройка над неким Deferred – разработчики улучшили код, вынесли его отдельно от основного кода $.ajax() (для возможности повторного использования и упрощения тестирования) и решили, а почему бы не опубликовать этот код (дать доступ пользователям библиотеки к нему и задокументировать его) – получился $.Deferred.

В свою очередь $.Deferred – это изначально два (done() и fail()), а теперь три (+ ещё progress()) надстройки над Callbacks, который был сделан как внутренний код $.Deferred. И снова, разработчики улучшили и отделили этот код от $.Deferred, реализовав последний через $.Callbacks (кстати, source-код $.Deferred стал при этом намного понятнее и читабельнее).

Вывод: разработчики не ставят главной целью добавление новых «никому не нужных» фичеров, они оптимизируют уже существующий внутренний код, попутно публикуя побочные, но не менее полезные от этого, результаты. И каждый раз, когда вы используете $.ajax() – знайте, вы используете $.Deferred, а значит и $.Callbacks. Это и есть пример реального использования.

Всех с наступившими праздниками, спасибо за внимание.

Так же этот релиз будет готов к загрузке с Google и Microsoft CDNs в течении дня или двух.

Команда jQuery благодарит всех, кто принимал участие в тестировании и и поиске багов в бета-версиях и верит в прочность и стабильность релиза. И просит всех, кто найдёт какие-либо баги, рапортовать о них на баг-трекер и по-возможности подкреплять тестами для воспроизведения на jsFiddle для более быстрого анализа проблем.

Что нового в версии 1.7

Краткий список нововведений можно быстро получить просмотрев описание API с тегом 1.7, а ниже будет описание больших новшеств версии 1.7 и некоторые вещи, которые пока ещё не вошли в документацию по API.

Новый API событий: .on() и .off()

Новый .on() и .off() API делает универсальным и более удобным привязку к событиям в документе.

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

Когда указан selector, то метод .on() работает так же, как .delegate() – привязывает обработчики события, фильтруя элементы по селектору. Если же selector не указан или равен null, то вызов работает как обычный .bind(). Существует некоторая неоднозначность: если аргумент data является строкой, требуется явно передавать аргумент selector в виде строки или null, чтобы data не был ошибочно принят за селектор. Передавая в качестве data объект, не требуется специально беспокоится об указании селектора.

Все существующие виды привязок к событиям (и соответствующие им метода отвязки от событий) доступны и в версии 1.7, но рекомендуется использовать именно .on() для новых проектов, где гарантированно будет использоваться версия 1.7 или старше. Ниже приведены небольшие примеры, демонстрирующие аналогичные привязки к событиям с использованием старого и нового API:

$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');

$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);

$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

$('a').live('click', fn);
$(document).on('click', 'a', fn);

$('a').die('click');
$(document).off('click', 'a');

Улучшена производительность делегированных событий (Delegated Events)

Делегирование событий (event delegation) приобретает всё большую важность с ростом размера и сложности страниц. Такие фреймворки, как Backbone и Sproutcore, широко используют делегирование событий. Имея это в виду, обработка событий в jQuery 1.7 была переработана с целью ускорить процесс обработки событий, особенно для наиболее распространённых случаев.

Чтобы оптимизировать код для часто встречающихся видов селекторов, команда jQuery рассмотрела срез с Google Codesearch. Почти две третьих всех селекторов, используемых в .live() и .delegate(), имеют вид tag#id.class, где используются один или несколько тегов, id или классов. В оптимизации разбора этих простых селекторов команда jQuery добилась таких успехов, что смогла обойти даже время нативного matchesSelector браузеров во время обработки событий. Для разбора более сложных селекторов по-прежнему используется Sizzle движок.

В конечном результате имеет почти двукратное ускорение по сравнению с версией 1.6.4:

Улучшение поддержки HTML 5 в IE 6/7/8

Любой, кто пробовал использовать новые теги из HTML5, например, такие как <section>, гарантировано имели проблемы не только с тем, что IE 6/7/8 не понимают этих тегов, но ещё и совсем удаляют их из документа. В jQuery 1.7 есть встроенная поддержка тегов HTML5 для старых IE в таких методах, как .html(). Этот механизм реализован на том же уровне, что и ранее innerShiv. По-прежнему требуется подключать HTML5Shiv в секции head документа для поддержки HTML5-тегов в старых IE. Подробности смотрите на The Story of the HTML5 Shiv.

Интуитивная работа переключения анимации

В предыдущих версиях jQuery переключение анимации, такое как .slideToggle() или .fadeToggle(), не срабатывало правильно, если несколько анимаций были запущены последовательно и предыдущая была прервана методом .stop(). Это было исправлено в версии 1.7, теперь перед запуском анимации запоминаются начальные значения, и происходит сброс значений, если переключение анимации было прервано преждевременно.

Asynchronous Module Definition (AMD)

Теперь jQuery поддерживает асинхронное определение модуля – AMD API. Это не означает, что jQuery является загрузчиком скриптов (script loader); jQuery всего лишь использует AMD-совместимую модель определения модуля, поддерживаемую, например, RequireJS или curl.js, поэтому jQuery может быть подключена динамически таким загрузчиком, и событие ready также является подконтрольным ему. Теперь AMD-совместимые загрузчики могут подключать немодифицированную версию jQuery с CDN (например, от Google или Microsoft). Особая благодарность выражается James Burke (@jrburke) за предоставленные патч и тесты и ожидание включения их сборку.

jQuery.Deferred

Объект jQuery.Deferred был расширен новыми обработчиками прогресса и методами уведомления, вызывающими этими обработчики. Это позволяет асинхронно уведомлять слушателей о прогрессе исполнения без завершения или отмены запроса. Дополнительно появился метод state(), который возвращает состояние Deferred-объекта, это в первую очередь полезно при отладке.

Теперь Deferreds реализованы через использование новой функциональности – jQuery.Callbacks, обобщающей функции вызова очереди или серии колбэков. Эта новая функциональность может быть интересно писателям плагинов, хотя Deferreds и система событий обеспечивают более высокий уровень подобной функциональности.

jQuery.isNumeric()

Внутри jQuery было найдено несколько ситуаций, когда необходимо знать, является ли аргумент числом или может быть успешно сконвертирован в число. И было решено написать и задокументировать метод jQuery.isNumeric() как полезную утилиту. Передайте внутрь него любой аргумент и получите true или false в качестве результата.

Удаленная функциональность

event.layerX и event.layerY: в версии 1.7 удалены эти нестандартные свойства. Хотя ранее они никому не мешали, Chrome 16 показывает множество предупреждений в консоли. Поэтому было решено отказаться от них и удалить. Там, где ещё поддерживаются эти свойства, они будут доступны через event.originalEvent.layerX и event.originalEvent.layerY.

jQuery.isNaN(): эта недокументированная утилита была также удалена. Она имела имя встроенной функции JavaScript, но семантически не соответствовала ей. Новая функция jQuery.isNumeric() позволяет делать тоже самое. Несмотря на то, что функция jQuery.isNaN() была недокументирована, некоторые проекты на Github использовали её. Команда jQuery связалась с ними и предупредили о проблеме и возможных решениях.

jQuery.event.proxy(): этот недокументированный и устаревший метод был удалён. Вместо него следует использовать задокументированный метод jQuery.proxy.

Прочие благодарности и change log со списком всех поправленных багов можно прочитать в конце оригинальной статьи http://blog.jquery.com/2011/11/03/jquery-1-7-released/

• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2011 г.
• Мягкая обложка, 416 стр.
• ISBN 978-5-9775-0732-5
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery. Приведено большое количество примеров использования плагинов для jQuery – создание графиков и диаграмм, фотогалерей, меню, работа с таймерами и cookies, обработка табличных данных и др. Во втором издании в примерах используется библиотека jQuery версий 1.4.4 и 1.5.2, а также надстройка UI jQuery 1.8.9.
Компакт-диск содержит примеры из книги, файлы библиотеки jQuery 1.4.4 и 1.5.2, файлы надстройки UI jQuery 1.8.9, а также файлы расширений сторонних разработчиков.

От себя могу добавить, что книга написана в таком же духе, как и первое издание, т.е. примеры, примеры и еще раз примеры плюс подробные разъяснения….

Отрывок книги в PDF

Полное содержание:

Обычно Web Storage рассматривают как развитие технологии cookie*. Действительно, при всей универсальности (поддерживаются производителями браузеров с незапамятных времен), файлам cookie присущи серьезные (с современной точки зрения) недостатки:
- ограниченный, и очень маленький размер файлов. Обычно не более 4 Кбайт;
- передача от браузера к серверу и обратно при каждом запросе;
Это только основные недостатки, углубляться в остальные не будем, чтобы не отвлекаться от темы.

Куки (от англ. cookie — печенье) — небольшой фрагмент данных, созданный веб-сервером или веб-страницей и хранимый на компьютере пользователя в виде файла, который веб-клиент (обычно веб-браузер) каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта. Применяется для сохранения данных на стороне пользователя, на практике обычно используется для:
- аутентификации пользователя;
- хранения персональных предпочтений и настроек пользователя;
- отслеживания состояния сессии доступа пользователя;
- ведения статистики о пользователях.

Что получаем от использования Web Storage?
Во-первых, общий размер сохраняемых данных до 5 Мбайт (по крайней мере это рекомендации производителям браузеров);
Во-вторых, данные обоих хранилищ (локальное хранилище и хранилище сеанса) не гоняются от клиента к серверу и обратно;
В-третьих, в настоящее время Web Storage уже поддерживается последними версиями основных браузеров (к сожалению, отличия в реализации все равно существуют);

Большой минус – число поклонников древнего программного обеспечения среди пользователей Интернета снижается не слишком быстро и значит разработчик должен взвалить на свои хрупкие плечи обязанность проверить, поддерживает ли браузер эту технологию.

Проверка сводится к проверке существования объектов хранилища сеансов window.sessionStorage и локального хранилища window.localStorage.

Вы можете открыть файл example-a.html, чтобы увидеть пример в действии. Попробуйте открыть пример в разных браузерах.

Выполняем проверку window.sessionStorage

if(window.sessionStorage)
{
  alert('Браузер поддерживает хранилище сеанса');
} else {
  alert('Браузер не поддерживает хранилище сеанса');
}

Аналогичным образом можно выполнить и проверку существования window.localStorage.

Если мы убедились, что используемый браузер поддерживает эту технологию, то настало время «живьем» посмотреть на этот самый Web Storage и узнать, чем отличается локальное хранилище от хранилища сеанса.

Возьмем для примера браузер Opera. Если нажать комбинацию клавиш Ctrl+Shift+I, откроется панель «Dragon Fly» – встроенное в браузер средство отладки. Можете попробовать и Google Chrome – используйте точно такое же сочетание клавиш.

Посмотрите – здесь доступно для просмотра, изменения и удаления содержимое обоих хранилищ.

Теперь о том, почему хранилищ два и чем они отличаются.

Если приложению требуются данные, которые продолжают существовать после того, как будет закрыта вкладка или окно браузера, тогда следует использовать localStorage. Здесь уместно сохранять данные, содержащие например, пользовательские настройки каких-либо интерфейсов.

Если же данные должны храниться в течение времени, которое необходимо для просмотра нескольких страниц (диалоговые окна, многостраничные формы) – подойдет sessionStorage. В этом случае данные перестанут существовать, как только пользователь закроет вкладку или окно браузера.

В остальном оба хранилища выглядят братьями-близнецами. По крайней мере установка, получение и удаление данных для обоих типов хранилищ не отличается ничем, кроме названия объекта – sessionStorage или localStorage.

Попробуем сохранить какие-либо данные в хранилище сеансов:

window.sessionStorage.setItem('mySessionKey',
'Какие-то данные в хранилище сеанса');

Метод setItem принимает два аргумента – строку с именем ключа и строку с данными, которые в дальнейшем можно будет извлечь по соответствующему им ключу. Причем сделать это очень просто:

var d = window.sessionStorage.getItem('mySessionKey');

Передаем методу getItem в качестве аргумента имя ключа, и в переменной d получаем строку ‘Какие-то данные в хранилище сеанса’. Так же просто можно удалить ставшие ненужными данные:

window.sessionStorage.removeItem('mySessionKey');

После этой операции, при попытке получить данные по ключу mySessionKey из хранилища сеанса, будем получать null.

Сохранять и получать значения можно и иным способом, без вызовов методов setItem и getItem. Например:

// сохраняем
window.sessionStorage.mySessionKey2 = 'Какие-то другие данные в хранилище сеанса.';
// получаем
alert(window.sessionStorage.mySessionKey2);

Двигаемся дальше… Во-первых, используем в следующем примере локальное хранилище, а во-вторых, попробуем сохранить в нем не просто банальную строку, а объект, значениями свойств которого являются строки, числа, массивы и даже другие объекты.

Вообще-то, спецификация Web Storage подразумевает сохранение данных не только строкового типа. Но, по крайней мере в текущих версиях браузеров, эти возможности ограничены. Поэтому без некоторых хитростей тут не обойтись. Вернее, пока не обойтись…

Вы можете открыть файл example-b.html, чтобы увидеть пример в действии. Попробуйте открыть пример в разных браузерах.

Поставим перед собой задачу сохранить в локальном хранилище под именем myLocalData вот такой объект:

var localData = {
  'name': 'Василий Иванович',
  'age': 47,
  'phones': ['(495) 222-33-44 begin_of_the_skype_highlighting              (495) 222-33-44      end_of_the_skype_highlighting begin_of_the_skype_highlighting              (495) 222-33-44      end_of_the_skype_highlighting', '(903) 987-55-66'],
  'profession': { 'one':'токарь', 'two':'слесарь', 'three':'сантехник' }
}

Казалось бы нет ничего сложного, проходили… Но, по причине, указанной выше мы сделаем несколько иначе:

var data = JSON.stringify(localData);
window.localStorage.setItem('myLocalData', data);

Приведем объект JSON к строке и только потом сохраним эту строку в локальном хранилище под именем myLocalData.

Соответственно, при извлечении нужных нам данных проделаем обратную операцию:

var local = $.parseJSON(window.localStorage.getItem('myLocalData'));

[ см. $.parseJSON(json) ]
после чего в переменной local будет храниться объект, к свойствам которого можно легко обратиться:

local.name // Василий Иванович
local.phones[0] // (495) 222-33-44
local.profession.one // токарь

Мы познакомились с методами getItem, setItem и removeItem объектов localStorage и sessionStorage, но это еще не все возможности.

Объекты localStorage и sessionStorage имеют еще полезное свойство length, в котором как Вы уже догадались, содержится число, которое может сказать о том, сколько пар ключ/значение находится в данный момент в хранилище.

var n = window.localStorage.length;

Вот так в переменную n мы записали количество пар ключ/значение, содержащихся в локальном хранилище.

Есть у обоих объектов метод clear, по названию которого тоже можно догадаться о его предназначении:

window.localStorage.clear();

Таким образом можно удалить все содержимое хранилища (в данном случае локального).

Рассмотрим еще один метод, который обеспечивает извлечение заданного ключа по его индексу – метод key(index).

var myKey = window.localStorage.key(index);

Вот так можно получить значение ключа по его индексу. Ключи индексируются начиная с нуля, т.е. первому ключу соответствует индекс 0, а последнему length – 1. При попытке получить значение ключа по несуществующему индексу будет возвращено значение undefined (в Opera) или null (в Google Chrome).

Теперь немного про ошибки, которые могут возникать при сохранении данных в хранилищах. При превышении памяти хранилища попытка сохранения в нем значения приведет к возникновении ошибки QUOTA_EXCEEDED_ERR (некоторые браузеры могут предложить увеличить размер хранилища). К слову, такая же ошибка возникнет при отключении хранилища пользователем. Соответственно, в своих приложениях с использованием как локального хранилища, так и хранилища сеанса следует предусматривать обработку таких ошибок.

На «закуску» осталось самое интересное – мы рассмотрим механизм событий, реализованный в интерфейсе HTML5 Web Storage.

Сначала на простом примере познакомимся с объектом StorageEvent. Пример продемонстрирует возможность обмена данными между двумя окнами, относящимися к одному и тому же источнику(*). Естественно, что в примере будет использовано локальное хранилище, поскольку, как Вы помните, данные хранилища сеансов «живут» только в одном окне.

* – ресурс адресуется с использованием одного и того же сочетания схемы, хоста и порта.

Откройте файлы примеров example-c.html и example-d.html в двух разных окнах одного и того же браузера. Попробуйте ввести какие-либо произвольные данные в поле ввода в любом окне и нажмите кнопку Изменить. Посмотрите, что произойдет в другом окне.

Если посмотрели пример, то попробуем немного расшифровать, что же там происходит.

При нажатии на кнопку мы просто изменяем данные для ключа myText, находящиеся в локальном хранилище.

$('#btn').bind('click',function(){
  window.localStorage.setItem('myText', $('input').val());
});

А вот так зарегистрируем обработчик события storage, которое будет вызываться при изменениях в хранилище, вызванных любой страницей.

window.addEventListener('storage', function(e){
  $('#result').prepend('<p>Ключ (свойство key): ' + e.key +
  '<br />Новое значение (свойство newValue): ' + e.newValue +
  '<br />Старое значение (свойство oldValue): ' + e.oldValue +
  '<br />Адрес ресурса (свойство url): ' + e.url +
  '<br />Ссылка на хранилище (свойство storageArea): ' + e.storageArea.length + '</p>');
}, true);

Конечно, такой обработчик не сработает в IE, но нам сейчас не до кроссбраузерности.

Рассмотрим каждое из свойств:

key – содержит значение ключа, который был обновлен/удален;
url – адрес источника в котором произошло событие;
newValue – содержит новое/измененное значение (если значение было удалено, то null);
oldValue – содержит старое значение (если значение добавлено впервые, то null);
storageArea – ссылка на хранилище;

В принципе ничего непонятного тут нет. Несколько подробнее можно сказать разве что о storageArea. Его удобно использовать, когда необходимо при изменении каких-либо данных в хранилище производить операции над другими данными из того же хранилища. В примере мы используем свойство length, чтобы узнать количество содержащихся в хранилище элементов.

В заключение хочу сказать, что я ни в коем случае не призываю никого сразу же внедрять новые возможности в реальные проекты. Думаю, что когда вы будете испытывать предоставленные файлы примеров, то наверняка заметите отличия (и немалые!) в реализации спецификации Web Storage в различных браузерах. Наверное, время для 100% использования новых возможностей пока не пришло. Но оно обязательно придет – и встретить его надо вооруженным знаниями.

Вы можете скачать архив, который включает в себя все примеры, которые рассматривались в статье.

Виджет Autocomplete помогает организовать список подходящих значений при заполнении пользователем поля ввода.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Autocomplete и видим, что вместе с ним отметились чекбоксы Core, Widget и Position. Работа виджета Autocomplete зависит от этих файлов.

Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Возможности виджета можно оценить в демо-галерее на сайте разработчика. Я лишь постараюсь по-русски и как можно более простым языком объяснить, как заставить все это работать.

Итак, сначала в разделе HEAD потребуется подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. Третий подключенный файл необходим, чтобы реализовать Autocomplete.

Виджет Autocomplete не требует сложной HTML-разметки. Достаточно всего лишь поля для ввода текста, т.е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительную разметку можно добавить, чтобы использовать стили в соответствии с выбранной темой оформления.

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

Для начала разберем самый простой случай использования виджета – когда для формирования списка подсказок используются локальные данные.

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];

  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>

В переменной availableTags приготовили массив с подсказками. Затем выбрали элемент input по его идентификатору и применили метод autocomplete, которому сразу передали объект с настройками. Пока этот объект с единственным свойством source, которое определяет источник данных. В нашем случае указан массив availableTags.

На самом деле мы можем немного поднастроить виджет, используя другие свойства объекта настроек. Вот список этих свойств:

source – опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция. В любом случае в этой опции должен быть указан источник данных.
minLength – значение по умолчанию 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Значение 0 полезно при использовании локальных данных при списках из нескольких позиций. Это значение должно быть увеличено при использовании запросов к серверу для получения данных и при использовании больших списков, где одному введенному символу может соответствовать несколько тысяч наименований.
delay – значение по умолчанию 300. В этой опции указывается количество миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл при использовании локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку
appendTo – значение по умолчанию ‘body’. В качестве значения этой опции может быть использован селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок.
disabled – значение по умолчанию false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия.

Дальше посмотрим, как виджет может реагировать на события.

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(event, ui) {
      alert('Событие: ' + event.type +
            ',\nзначение: ' + ui.item.value);
    }
  });
});
</script>

Здесь мы добавили свойство select, где определили функцию, которая будет вызываться в тот момент, когда пользователь выберет какое-либо значение из списка подсказок. функция принимает два аргумента: первый — объект event, второй — специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить полезную информацию (мы выводим ее в окне предупреждения).

Это не единственное событие на которое умеет реагировать виджет – вот полный их список, где указано название свойства в объекте с настройками, название события в event.type и описание события:

create – Событие autocompletecreate наступает в момент инициализации.
search – событие autocompletesearch наступает перед выполнением запроса. Если функция, определенная в этой опции вернет false, запрос не будет отправлен.
open – событие autocompleteopen наступает в момент, когда открывается выпадающий список подсказок.
focus – событие autocompletefocus наступает всякий раз, когда один из пунктов списка подсказок получает фокус.
select – событие autocompleteselect наступает, когда выбран один из пунктов списка подсказок.
close – событие autocompleteclose наступает, когда список подсказок закры-вается. Событие наступает независимо от того, был выбран один из пунктов или нет.
change – событие autocompletechange наступает после того, как выбран один из пунктов списка. Событие всегда наступает после close.

Есть у виджета и некоторые методы, с помощью которых можно еще более расширить его функциональность.

Для примера добавьте в HTML-разметку пару кнопок:

<button id="search">Искать "as"</button>
<button id="close">Закрыть</button>
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

И вот такой JS-код:

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  });
  $("#search").click(function(){
    $("#tags").autocomplete("search", "as");
  });
  $("#close").click(function(){
    $("#tags").autocomplete("close");
  });
});
</script>

Теперь, щелкая по кнопке Искать «as» мы можем имитировать действия пользователя, как если бы он ввел символы «as» в элементе input. Щелкнув по кнопке Закрыть – закрываем список подсказок, если он был открыт ранее.

Ниже приведены описания всех доступных методов:

destroy – .autocomplete( ‘destroy’ ) полностью удаляет всю функциональность виджета Autocomplete. Возвращает элементы в состояние, предшествующее инициализации.
disable – .autocomplete(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable.
enable – .autocomplete(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable.
option – .autocomplete(‘option’, optionName, [value]) с помощью этого метода можно установить значение любой опции виджета после инициализации.
option – .autocomplete(‘option’, optionName) с помощью этого метода можно получить значение любой опции виджета после инициализации.
widget – .autocomplete(‘widget’) с помощью этого метода можно получить доступ к объекту, который представляет собой элемент с функциональностью Autocomplete.
search – .autocomplete(’search, [value]‘) с помощью этого метода без передачи второго па-раметра можно открыть весь список. Если передать во втором параметре строку символов, то будет открыт список с подходящими подсказками.
close – .autocomplete(‘close’) закрывает список подсказок, если он был открыт ранее.

В общем теперь мы знаем как настраивать виджет и управлять им, но пока мы использовали исключительно локальные данные для формирования списка подсказок. Для изучения возможностей – подойдет, но для реальной работы – вряд ли. В реальной работе наверняка потребуется формировать подсказки из данных, хранящихся на своем сервере, а может быть и вообще не на своем

Опция source, которая, напомню, является обязательной и определяет источник данных, может принимать также строку, где содержится url, к которому следует отправлять запрос. А еще в source можно определить свою функцию, которая будет делать, то что надо именно Вам. Вот этот, пожалуй самый гибкий способ мы и разберем. Попробуем получить в виде списка подсказок какие-либо данные с сервера geonames.org

Я приведу полностью рабочий код и попробую разъяснить, как и что работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-autocomplete-loading {
  background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
#log { height: 200px; width: 600px; overflow: auto; }
</style>
<script type="text/javascript">
$(function() {
  $("#city").autocomplete({
    source: function(request,response) {
      $.ajax({
        url: "http://ws.geonames.org/searchJSON",
        dataType: "jsonp",
        data: {
          featureClass: "P",
          style: "full",
          maxRows: 12,
          name_startsWith: request.term
        },
        success: function(data) {
          response($.map(data.geonames, function(item) {
            return {
              label: item.name + ", " + item.countryName,
              value: item.name + " (" + item.countryName + ")" + " [" + item.lat + ", " + item.lng + "]"
            }
          }));
        }
      });
    },
    minLength: 3,
    select: function(event,ui) {
      $("<p/>").text(ui.item ? ui.item.value : "Ничего не выбрано!").prependTo("#log");
      $("#log").attr("scrollTop", 0);
    }
  });
});
</script>
</head>
<body>
<div class="ui-widget">
  <label for="city">Город: </label><input id="city" /><br />
  <span style="font-size:.8em;">Поддерживается <a href="http://geonames.org">geonames.org</a></span>
</div>
<div id="log" class="ui-widget ui-widget-content"></div>
</body>
</html>

Сначала смотрим на HTML-разметку. В первом элементе div нас интересует только элемент input с идентификатором city. Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log используем для занесения в него полученной информации.

Если смотреть JavaScript-код, то увидим, что объект с настройками содержит три свойства — обязательное свойство source, а также свойства minLength и select.
Мы займемся рассмотрением только свойства source, где можно написать свою функцию. Эта функция принимает два аргумента. Первый аргумент — request — объект, содержащий единственное свойство term, в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент — response — функция, с помощью которой будет обрабатываться полученный ответ.

Внутри функции, определенной в свойстве source мы имеем практически неограниченную свободу действий. А поэтому, не мудрствуя, пишем там ajax-запрос к url http://ws.geonames.org/searchJSON, в опции dataType указываем, что в ответе ожидаем получить данные в формате JSON. В опции data определяем объект с параметрами запроса, который будет отправляться на указанный url (почему параметры именно такие – надо смотреть документацию по API на сервере geonames.org). В последнем параметре передаем request.term – то, что ввел пользователь.

В следующей опции ajax-запроса – опции success, вызываем функцию обработки ответа response. В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно. Мы используем метод $.map чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта — item.countryName, item.lng, item.lat (почему свойства именно такие – см. документацию по API, которую предоставляет веб-сервис). Функция, которую мы написали, для каждого элемента возвращает объект, содержащий два свойствами, которые мы определили самостоятельно, используя полученные данные. Из получившегося массива таких объектов и строится список подсказок.

В общем, вот так как-то… В заключение, большая человеческая просьба – в комментариях пожалуйста, можете похвалить или поругать в принципе. Если же Вы хотите задать технический вопрос, то задавайте его на форуме jQuery.

В новой версии исправлено 83 бага и закрыто 460 тикетов. Дополнена документация jQuery API.

Полностью был переработан модуль AJAX. Наиболее заметные изменения коснулись метода jQuery.ajax (jQuery.get, jQuery.post и пр.), сейчас эти методы возвращают объект jqXHR, который предоставляет доступ к объекту XMLHttpRequest.

Также модуль AJAX расширен за счёт возможностей назначать упорядоченные обработчики, фильтры и транспорты данных. Эти новшества должны предоставить больше возможностей для написания новых ajax плагинов.

Ещё одним нововведением стали deferred objects – это инструемнт, который позволяет создавать очередь задач, которые будут выполнены позже. Таким образом становится возможно работать со значениями, которые не могут быть получены немедленно (например, при асинхронных запросах ajax), и назначать несколько обработчиков, которые будут вызваны при получении таких «отложенных» значений.

Теперь jQuery предоставляет новую функциональность – jQuery.sub(), благодаря которой можно создавать и изменять дубликат jQuery, поддерживающий весь его API. Например, можно это использовать для переопределения исходных методов jQuery без влияния на на других пользователей, вызывающих эти же методы, или создавать скрытое API для плагинов без коллизий пересечения имён объектов.

В этом релизе была увеличена скорость работы методов обхода DOM: .children(), .prev(), .next()

В заключении, команда jQuery сделала некоторые изменения во внутренней системе сборки библиотеки. Проделана работа в сторону стандартизации всех процессов сборки на серверной среде NodeJS, которая сильно впечатлила команду jQuery. Разработчики особенно ценят то, что им удалось снизить зависимость от устаревшей системы Java/Rhino и перейти на многообещающую JavaScript-среду. Дополнительно к этому также осуществлен переход к использованию UglifyJS взамен Google Closure Compiler, всвязи с чем заметны некоторые улучшения в плане размера файла библиотеки.

Ссылка на официальную новость: JQUERY 1.5 RELEASED

Синтаксис шаблонов довольно функционален. В теле шаблона разработчик может обращаться к полям объекта, к полям полей объекта, вызывать методы объекта и его полей, обращаться к внешним объектам JavaScript и jQuery, просто писать JS-выражения. Кроме всего этого внутри шаблона можно итеративно выводить коллекции, организовать условный вывод, использовать вложенные шаблоны. Но давайте обо всём по порядку.

Примеры в статье

Все примеры я буду приводить ключевыми кусками, чтобы не загромождать материал повторяющимися частями кода. В примере будут присутствовать текст шаблона, JSON данных, при необходимости JSON опций (параметр options метода .tmpl( ) ) и результат. В общем случае полный код примера будет выглядеть так:

<script type="text/x-jquery-tmpl">
    <li> ЭТО ТЕКСТ ШАБЛОНА </li>
</script>
<script type="text/javascript">
var data = [
    // ЭТО МАССИВ ДАННЫХ
];
var options = {
    // ЭТО ОПЦИИ
};
$(function() {
    // ПРИМЕНЕНИЕ ШАБЛОНА И ВЫВОД РЕЗУЛЬТАТА:
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Так будет полностью выглядеть приведенный ниже пример 1.:

<script type="text/x-jquery-tmpl">
    <li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>
</script>
<script type="text/javascript">
var data = [
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
];
var options = {
};
$(function() {
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Вставка данных в шаблон ${}, {{= }}, {{html }}

С помощью этих инструкции можно вставить в шаблон значение поля объекта данных, результат работы метода или результат вычисления некоторого js-выражения, внутри инструкции можно обращаться к глобальным объектам JS, а также к служебным объектам, созданным при обработке шаблона.

Прежде чем перейти к примерам, хочу немного акцентировать внимание на сходстве и разнице этих инструкций. Все три инструкции предназначены для вывода результата в эту точку шаблона. ${expression} и {{= expression}} эквивалентны (первая инструкция – это сокращённая форма второй), результат вставляется в шаблон в виде текста, если в тексте встречаются символы разметки (<  >  & и пр.), то они будут заменены на соответствующие спецсимволы (&lt;  &gt;  &amp; и пр.). Для вставки же разметки с сохранением html-кода нужно использовать инструкцию {{html expression}}.

Пример 1. Вывод данных с разметкой и без

Шаблон:

<li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>

Данные:

[
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
]

Результат:

<ul class="output">
    <li>obj1 (<em>Object one</em>); вычисления: 21</li>
    <li>&lt;em&gt;obj2&lt;/em&gt; (<strong>Object two</strong>); вычисления: 18.3</li>
</ul>

Доступ к объектам и внутренние параметры шаблона

Как я уже упоминал, внутри выражения можно обращаться к глобальным объектам и функциям JS, при этом шаблонизатор сам пытается определить, является указанное имя ссылкой на глобальный объект или на часть переданных данных. И конечно же, локальные данные имеют более высокий приоритет, чем глобальные. Давайте определим в документе глобальные объект testObj и функцию testFunc и попробуем их использовать:

var testObj = {
    Value: 1
};

function testFunc(i) {
    return i % 2 == 1;
}

Пример 2. Использование глобальных объектов

Шаблон:

<li>${Name}; testObj.Value = ${testObj.Value}; testFunc(${p}) => ${testFunc(p)}</li>

Данные:

[
    { Name: "obj1", p: 3, testObj: { Value: 20 } },
    { Name: "obj2", p: 13, testFunc: function(i) { return i + 7; } }
]

Результат:

<ul class="output">
    <li>obj1; testObj.Value = 20; testFunc(3) =&gt; true</li>
    <li>obj2; testObj.Value = 1; testFunc(13) =&gt; 20</li>
</ul>

Внутри шаблона есть ещё доступ  к специальным объектам – внутренним параметрам шаблона: $item и $data.

$item – представляет доступ к обрабатываемой в данный момент единице данных для вставки в шаблон, внутри этого объекта собраны и параметры, переданные пользователем, и дополнительные параметры из аргумента options функции .tmpl( ). Доступ к параметрам из данных осуществляется через вложенный объект .data, а к параметрам аргумента options – напрямую, т.е. если вызвать $(‘#myTmpl’).tmpl({ p1: 1 }, { p2: 2 }), то в шаблоне получить доступ к ним можно так: $item.data.p1 и $item.p2.

$data – это сокращённая версия доступа к данным, по сути это просто синоним для $item.data, в свете этого доступ в шаблоне к p1 и p2 из вызова в абзаце выше может быть таким: $data.p1 и $item.p2.

Пример 3. Параметр options

Шаблон:

<li>${Name}; p * 100 = ${$item.Method($data.p)}</li>

Данные:

[
    { Name: "obj1", p: 3.3 },
    { Name: "obj2", p: 0.13 }
]

Опции:

{ Method: function(i) { return i * 100; } }

Результат:

<ul class="output">
    <li>obj1; p * 100 = 330</li>
    <li>obj2; p * 100 = 13</li>
</ul>

Условная разметка в шаблоне {{if }} {{else}} {{/if}}

Внутри шаблона можно отслеживать некие условия и в зависимости от них выводить тот или иной кусок. Для достижения этих целей применяются следующие комбинации инструкций:

{{if expression}} tmplPart {{/if}} – простой вывод части шаблона, только если выражение истинно,
{{if expression}} tmplPart1 {{else}} tmplPart2 {{/if}} – вывод части 1 или 2 в зависимости от истинности выражения,
{{if expr1}} tmplPart1 {{else expr2}} tmplPart2 {{else}} tmplPart3 {{/if}} – это уже построение цепочки последовательных проверок (if .. else if .. else if .. else ..), понятное дело, что последний else без выражения необязателен. Думаю, тут всё понятно, давайте посмотрим простенький пример:

Пример 4. Условный вывод

Шаблон:

<li>
{{if (
    (typeof(useFirstLastName) != "undefined" ? useFirstLastName : $item.defaultUseFirstLastName) &&
    $data.FirstName && $data.LastName)}} ${FirstName + " " + LastName}
{{else $data.FullName}} ${FullName}
{{else $data.Name}} ${Name}
{{else}} ${$item.NoName}
{{/if}}
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2", useFirstLastName: true },
    { Title: "object number 3" }
]

Опции:

{ NoName: "[noname]", defaultUseFirstLastName: false }

Результат:

<ul class="output">
    <li>  Object 1  </li>
    <li>  Object Two  </li>
    <li>  [noname]  </li>
</ul>

Поясню, что происходит в шаблоне. Под первым условием мы проверяем, нужно ли выводить имя объекта в виде конкатенации FirstName и LastName – при этом проверяется условие внутри объекта, если оно не определено, то условие в опциях, и требуется наличие обоих свойств. Обращаясь в условии к этим свойствам через параметр $data, гарантируем их наличие именно в переданных данных, а глобальные объекты при этом игнорируются. Во втором и третьем условиях проверяем последовательно свойства FullName и Name – выводим первое попавшееся, если нет ни одного из них, то выводим «заглушку» из опций.

Итеративный обход с помощью {{each }}

Думаю всем знакома функция jQuery .each(func) (а есть ещё и $.map(array, callback) ) и надеюсь многим знакома конструкция JS for (var key in obj) – эти выражения совершают итеративный обход элементов коллекции. В шаблонах тоже возможен вывод коллекций поэлементно и описывается он следующей инструкцией: {{each( index, value ) data}} tmplText {{/each}}. index и value – это имена параметров (указываются без кавычек) для доступа соответственно к текущему индексу и значению в коллекции. Есть и сокращённая форма этой инструкции: {{each data}} tmplText {{/each}} – при этом в тексте шаблона к текущим индексу и значению можно обратиться по именам по умолчанию: $index и $value. Выражение data должно возвращать в результате массив или объект, объект будет обработан как словарь (коллекция пар имя-значение свойств объекта). Довольно слов, посмотрим на примере:

Пример 5. Вывод массива

Шаблон:

<li>
    <table border="1" cellpadding="5" cellspacing="0">
        <tr><th align="left">n</th><th align="left">${Expr}</th></tr>
        {{each NumCollection}}
        <tr><td>${$index}</td><td>${$value}</td></tr>
        {{/each}}
        <tr><td>${$item.EtcName}</td><td>${$item.EtcVal}</td></tr>
    </table>
</li>

Данные:

[
    { Expr: "2^n", NumCollection: [ 1, 2, 4, 8, 16 ] },
    { Expr: "2n-1", NumCollection: [ 1, 3, 5, 7, 9 ] },
]

Опции:

{ EtcName: "etc.", EtcVal: "..." }

Результат:

<ul class="output">
<li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2^n</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>2</td></tr>
             <tr><td>2</td><td>4</td></tr>
             <tr><td>3</td><td>8</td></tr>
             <tr><td>4</td><td>16</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
         </tbody>
    </table>
</li><li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2n-1</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>3</td></tr>
             <tr><td>2</td><td>5</td></tr>
             <tr><td>3</td><td>7</td></tr>
             <tr><td>4</td><td>9</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
        </tbody>
    </table>
</li>
</ul>

Пример 6. Вывод объекта-словаря

Шаблон:

<li>
JSON = { {{each(key, val) $data}}{{if $item.f}},{{/if}} "${key}": "${val}"{{if $item.f=true}}{{/if}}{{/each}} }
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2" },
    { Title: "object number 3" }
]

Опции:

{ f: false }

Результат:

<ul class="output">
    <li> JSON = {  "Name": "obj1", "FullName": "Object 1", "FirstName": "Object", "LastName": "One" } </li>
    <li> JSON = {  "FirstName": "Object", "LastName": "Two", "Name": "obj2" } </li>
    <li> JSON = {  "Title": "object number 3" } </li>
</ul>

Вывод шаблона в шаблоне {{tmpl }}

Внутри шаблона можно использовать другие шаблоны, которые могут быть получены извне (селектором, функцией) или в виде разметки сгенерированной на месте (например, когда сами данные определяют в каком виде их надо вставить в шаблон).

Полный вид инструкции: {{tmpl(data, options) template}}.

(На момент написания статьи в оф.документации показана сигнатура инструкции {{tmpl( [data], [options] ) template}} content {{/tmpl}} – это ОШИБКА, у этой инструкции нет закрывающего тега {{/tmpl}} и, соответственно, никакого содержания content)

Параметры data и options – являются необязательными и имеют то же назначение, что и в функции .tmpl(data, options), если параметры опущены, то в качестве данных используется текущий объект данных $data, а options – пустой объект.
Параметр template может принимать следующие значения: HTML-разметка, HTML- или jQuery-объект, строка, которая является именем скомпилированного шаблона или скомпилированный шаблон, также можно просто передать строку-селектор для jQuery (это недокументированная возможность, но она фигурирует в примерах).

Пример 7. Использование сгенерированного шаблона

Шаблон:

<li> {{tmpl $item.lt+tag+$item.gt+$item.tp+"{content}"+$item.lt+"/"+tag+$item.gt}} </li>

Данные:

[
    { tag: "strong", content: "<em>Hello</em>, " },
    { tag: "em", content: "World!" }
]

Опции:

{ lt: "<", gt: ">", tp: "$" }

Результат:

<ul class="output">
    <li> <strong>&lt;em&gt;Hello&lt;/em&gt;, </strong> </li>
    <li> <em>World!</em> </li>
</ul>

В шаблоне этого примера при генерировании вложенного шаблона используются строковые значение «<», «>», «$» в виде переменных, это сделано для того, чтобы они не воспринимались как разметка и инструкции внешним шаблоном.

Пример 8. Использование шаблона внутри шаблона

Шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) '#tmplSelector'}}</ul>{{/if}}</li>

Тут строку ‘#tmplSelector’ – следует заменить на корректный селектор (или функцию) получения текущего шаблона. Для моих «живых» примеров можно использовать такой шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8 script[type="text/x-jquery-tmpl"]')}}</ul>{{/if}}</li>

, в нём будет применен начальный шаблон, или

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8')[0].DemoData.Tmpl}}</ul>{{/if}}</li>

, в нём будет применён отредактированный шаблон – полностью «живой» пример.

Данные:

[
    { Name: "obj1", Items: [ { Name: "obj11", Items: [ { Name: "obj111" }, { Name: "obj112" } ] }, { Name: "obj12" } ] },
    { Name: "obj2" }
]

Опции:

{ }

Результат:

<ul class="output">
    <li>obj1 <ul>
        <li>obj11 <ul>
            <li>obj111 </li>
            <li>obj112 </li>
        </ul></li>
        <li>obj12 </li>
    </ul></li>
    <li>obj2 </li>
</ul>

В этом примере определён рекурсивный шаблон.

Шаблон в шаблоне с HTML-содержанием внутри {{wrap }}

{{wrap (data, options) template}} HTMLcontent {{/wrap}} – эта инструкция очень похожа на инструкцию {{tmpl }}, её параметры data, options и template имеют то же назначение. Отличие инструкции {{wrap }} от {{tmpl }} в том, что она может включать HTML-содержание и затем это содержание можно использовать в применяемом шаблоне.

В шаблоне, который передаётся параметром template, можно достать HTML-разметку, заключённую между {{wrap }} и {{/wrap}} с помощью метода $item.html(filter, onlyText). Первым аргументом можно наложить фильтр в виде селектора jQuery на выбираемые из разметки элементы, а вторым аргументом можно указать, что нужно в результате получить только текст верхнего выбранного элемента.

Пример 9. Использование {{wrap }}

<!DOCTYPE html>
<html>
<head>
  <style>
table { border-collapse:collapse; width:380px; background-color:#f8f8f8; border:2px solid blue; margin:5px; } table td { border:1px solid blue; padding:3px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}

    And this wraps different HTML content:
    {{wrap "#tableWrapper"}}
        <div>
            First <b>div</b>
        </div>
        <div>
            Second <b>div</b>
        </div>
        <div>
            Third <b>div</b>
        </div>
        <h3>first h3</h3>
        <h3>second h3</h3>
        <h3>third h3</h3>
    {{/wrap}}
</script>

<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
</script>

<div id="myWrappedView"></div>

<script>
$( "#myTmpl" ).tmpl()
    .appendTo( "#myWrappedView" );
</script>

</body>
</html>

Этот пример взят со страницы оф. документации по этой инструкции шаблона. В «живых» примерах приведена переработанная под их специфику версия.

Комментарии в шаблонах {{! }}

В шаблонах можно вставлять комментарии разработчика, которые не будут попадать в результат, делается это очень просто, а именно так:

{{! это текст комментария}}

«Живые» примеры из статьи

По этому адресу страница доступна online: http://zalab.net/projects/jquery/demo/tmpl/
А по этой ссылке можно загрузить эту страничку в архиве: jq.tmpl.live.examples.zip (33 KB)

Плагин шаблонов используется при необходимости вывести объект данных или массив объектов в разметку страницы. Плагин привязки данных нужен для связи объектов с элементами страницы и синхронного изменения значений. Плагин глобализации позволяет выводить такие данные, как числа, дата и время, сумма денег и т.п., на страницу в соответствии с форматом текущего языка.

Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков. В подтверждение моего мнения могу добавить, что разработчики jQuery анонсировали включение плагинов шаблонов и привязки данных в ядро библиотеки jQuery уже версии 1.5, а плагина глобализации – в соответствующую версию jQuery UI. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте http://api.jquery.com. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

В этой статье я расскажу немного о плагине шаблонов.

jQuery Templates plugin

Начнём с простенького примера:

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
];

$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

<ul id="movieList"></ul>

Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:

<ul id="movieList">
  <li><b>The Red Violin</b> (1998)</li>
  <li><b>Eyes Wide Shut</b> (1999)</li>
  <li><b>The Inheritance</b> (1976)</li>
</ul>

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов JS на страницу, объекты могут быть получены самыми разными способами, например, при разчётах или по результатам каких-то действий пользователя и, конечно самый часто приводимый пример, в виде JSON в ответе сервера на AJAX запрос.

Методы плагина

.tmpl( [ data ], [ options ] )
Получает содержимое первого выбранного элемента и использует его в качестве шаблона для форматированного вывода указанных данных.
data – данные для вывода в шаблон (объект или массив объектов).
options – опционально, определённое пользователем расширение в виде пар ключ-значение для объекта вывода в шаблон.
jQuery.tmpl(template, [ data ], [ options ])
Использует указанный шаблон для форматированного вывода указанных данных.
template – шаблон для форматирования данных, может быть одного из следующих типов: строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке), строка, соответствующая имени ранее скомпилированного шаблона.
data, options – имеют то же значение, что и выше
.tmplItem()
Возвращает для первого выбранного элемента структуру (объект) с результатами работы шаблонизатора. Возвращаемый методом объект обеспечивает доступ к:

• HTML-частям, из которых состоит шаблон
• ассоциированной единице переданных данных
• родительскому шаблону, если текущий шаблон является вложенным
• текущему шаблону, использованному для вывода
• определённому пользователем расширению (полям и методам), переданным в параметр options метода tmpl()

Этот метод используется, напрмер, когда после проведенного форматирования данных требуется узнать, а какие же данные были использованы при формировании некоторого куска разметки, или для обновления куска разметки с использованием новых данных.
jQuery.tmplItem( element )
Аналогичен методу .tmplItem, только структура с результатами работы шаблонизатора ищется для элемента element (HTML-элемент, в том числе и в jQuery-обёртке).
.template( [ name ] )
Метод делает из содержимого первого выбранного элемента скомпилированную версию шаблона форматирования.
name – необязательно имя шаблона, если имя указано, то потом можно использовать его для обращения к этому шаблону в методе jQuery.tmpl(name, data, options)
jQuery.template( [ name, ] template )
Метод аналогичен описанному выше, только здесь шаблон передаётся в качестве параметра template – это может быть строка, строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке).

Синтаксис шаблона

Я вкратце приведу описание нескольких самых основных элементов шаблона, остальное надеюсь более подробно описать в следующей статье (если будет положительный отклик на эту статью)
${fieldNameOrExpression} и {{= fieldNameOrExpression}}
Позволяет вставить в шаблон значение поля (свойства) объекта данных, может быть также использовано для вставки результата метода или js-выражения. Напрмер, «${Name}» – вставит в шаблон значение поля obj.Name, а при том, что Languages – это поле объекта, которому присвоен массив, «${Languages.length}» – вставит в шаблон длину этого массива, и наконец, если у объекта есть метод getLanguages с двумя параметрами, то «${getLanguages(Languages, ‘ – ‘)}» – вставит в шаблон результат работы этого метода.
{{html fieldNameOrExpression}}
Элемент шаблона ${field} (или {{= field}}) вставляет в результат значение указанного поля в виде текста, т.е. если в строке будут HTML-теги, то они будут закодированы, а не преобразованы в разметку. Если вам требуется вставить данные в шаблон именно в виде HTML-разметки, то надо использовать синтаксис {{html <что нужно вставить>}}.
Для начала работы с плагином уже достаточно рассказано, могу лишь добавить, что синтаксис шаблонов позволяет вставлять вложенные шаблоны, условные инструкции, обращаться к некоторым объектам JS и jQuery и ещё кое-что… Остальное – материал будущей статьи.

Источники

Статья написана по материалам, найденным во всемирной паутине. В основном это перевод официальной документации. Оригиналы можно посмотреть по следующим ссылкам:

• Сообщение в блоге jQuery и в блогах MS
• Страница документации плагина (примеры взяты оттуда)

Об авторе

Зовут меня Зайцев Андрей, мой маленький блог, профиль на форуме zandroid

Это моя первая статья в этом блоге, надеюсь, и не последняя  Большое спасибо Геннадию за возможность публикации и за полезные советы по написанию и оформлению материала.

Примеры

Пример 1: Динамическое переключение применяемого шаблона

<!DOCTYPE html>
<html>
<head>
  <style>
    table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
    table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
    .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="summaryTemplate" type="text/x-jquery-tmpl">
  <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
  <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
</script>

Click for details:
<table><tbody id="movieList"></tbody></table>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var selectedItem = null;

/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );

/* Add onclick handlers for movie template items
using the summary or details template */
$("#movieList")
  .delegate( ".movieSummary", "click", function () {
    if (selectedItem) {
      // Set the template on the previously selected item
      // back to the summary template
      selectedItem.tmpl = $( "#summaryTemplate" ).template();
      selectedItem.update();
    }
    /* Get the data structure for the template item
       which this clicked element belongs to, and make
       it the selected item */
    selectedItem = $.tmplItem(this);

    /* Set the template on this item to the detail template */
    selectedItem.tmpl = $( "#detailTemplate" ).template();
    selectedItem.update();
  })
  .delegate( ".movieDetail", "click", function () {
    /* Set the template on this item to the summary template */
    selectedItem.tmpl = $( "#summaryTemplate" ).template();
    selectedItem.update();
    selectedItem = null;
  });
</script>

</body>
</html>

Довольно сложный и объемный, в нём используются сразу несколько методов плагина, взят с этой страницы.

Пример 2: Вставка данных с разметкой в шаблон

<!DOCTYPE html>
<html>
<head>
  <style>
    .role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <h4>${Name}</h4>
  <p>{{html Synopsis}}</p>
</script>

<div id="movieContainer"></div>

<script>
/* The Synopsis data field contains HTML markup. */
var movie = {
  Name: "Meet Joe Black",
  Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
};

/* Render the template with the movie data.
   The template uses the {{html}} template tag
   to  insert the Synopsis HTML markup data. */
$( "#movieTemplate" ).tmpl( movie )
  .appendTo( "#movieContainer" );
</script>

</body>
</html>

В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы.

P.S.

Примеры не стал расписывать, если аудитория поддержит мои начинания, то можно пошагово расписать что, как и почему, и привести ещё несколько примерчиков.

Вопросы по плагину прошу задавать на форуме, если есть комменты именно по статье – то комментируйте ниже.

Итак план работ на эту статью:

• jqGrid и «деревья»
  • Общие сведения о деревьях
  • jqGrid и SQL деревья
  • jqGrid и статические деревья
• Связывание данных в jqGrid
  • Простая подтаблица (subgrid)
  • jqGrid как subgrid
  • Ведущая и ведомая jqGrid

I.jqGrid и «деревья»

1) Краткие сведения о деревьях
Конечно здесь речь пойдет не о садово-огородных работах, а об представлении древовидных структур данных. В очередной раз обратимся за определением к Википедии:

Древовидная структура является одним из способов представления иерархической структуры в графическом виде. Древовидной структурой называется благодаря тому, что граф выглядит как перевернутое дерево. По этой же причине говорят, что корневой узел (корень) находится на самом верху, а листья — внизу.

В принципе более или менее сносное определение, несмотря на то, что оно навивает академическую скуку я все же настоятельно рекомендую ознакомиться с материалом по древовидным структурам. Поверьте моему не большому опыту, абсолютно каждый программист рано или поздно станет перед необходимостью использовать дерево, и тут одним из помошников может стать jqGrid. Плагин может работать с двумя самыми распространенными в вычислительной технике типами деревьев: на основе «вложенных множеств» (Nested Sets) и «матрицы смежностей» (adjacency matrix). Вообще говоря тема деревьев очень серьезна, это один из разделов теории графов на изучение которых отводится не одна лекция в ВУЗах, но от себя посоветую те материалы которые мне в свое время очень помогли. Столкнувшись впервые с проблемой хранения деревьев я наткнулся на материал по подходу вложенных множеств (Хранение древовидных структур в Базах данных) и сразу же остановился на нем, наверное потому что для работы с таким деревом существует готовый PHP класс. Но в процессе написания статьи я все же прочел статью Работа с «MySQL. Деревья» в которой рассматривается подход матрицы смежностей.

Думаю здесь общие сведения следует закончить и перейти к практическому рассмотрению.

2) jqGrid и SQL деревья
Для того, чтобы jqGrid могла работать с древовидными структурами, она должна быть загружена с модулем Tree Grid. Плагин может работать с обоими типами деревьев, упомянутых в предыдущем пункте. При этом jqGrid может работать с деревьями подгрузив все дерево за один раз или же подгружая ветви и листья по мере необходимости. Собственно загрузку дерева за один раз я рассматривать не буду, не интересно, а вот автоподгрузку мы разберем детально. И на этой ноте давайте перейдем к просмотру ДЕМО3.1, ссылка для скачивания

$(function(){
     $('#table_nested').jqGrid({
                     treeGrid: true,
                     treeGridModel: 'nested',
                     ExpandColumn: 'title',
                     ExpandColClick: true,
                     url: 'p3e1_n.php',
                     datatype: "json",
                     mtype: "POST",
                     colNames:["id","Раздел"],
                     colModel:[
                                   {name:'cid',index:'cid', width:1, hidden:true, key:true},
                                   {name:'title',index:'title', width:180}
                                  ],
                     treeIcons: {plus:'ui-icon-folder-collapsed',minus:'ui-icon-folder-open',leaf:'ui-icon-document'},
                     height: 'auto',
                     caption: 'вложенныe множества',
                     hidegrid: false
     });

     $('#table_adjacency').jqGrid({
                     treeGrid: true,
                     treeGridModel: 'adjacency',
                     ExpandColumn: 'title',
                     ExpandColClick: true,
                     url: 'p3e1_a.php',
                     datatype: "json",
                     mtype: "POST",
                     colNames:["cid","Раздел"],
                     colModel:[
                                   {name:'cid',index:'cid', width:1, hidden:true, key:true},
                                   {name:'title',index:'title', width:180}
                                   ],
                     treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-icon-person'},
                     height: 'auto',
                     caption:'матрица смежностей',
                     hidegrid: false
    });
});

Настройки обоих таблиц идентичны, но имеется ряд свойств, отличающих эти экземпляры от рассмотренных в предыдущих статьях.

• treeGrid: true – самый главный параметр, указывает что jqGrig будет работать с древовидной структурой, а не с простыми табличными данными
• treeGridModel: ‘adjacency’ / ‘nested’ – это свойство определяет какой алгоритм дерева использовать
• ExpandColumn: ‘title’ – определяет при клике по какому столбцу происходит открытие и(или) загрузка ветви
• ExpandColClick: true – необходимо, чтобы открытие ветви происходило при клике на колонку, а не на иконку
• colModel:[... key:true},...] – свойство key в массиве colModel позволяет указать данные какого столбца следует использовать как уникальный идентификатор записи при запросе данных с сервера. Т.е. благодаря этому свойству, можно переопределить идентификатор. Но только в одном столбце может быть указан key. Плагин будет использовать первый, найденный столбец как ключевой.
• treeIcons: – позволяет переопределить стандартные ({plus:’ui-icon-triangle-1-e’,minus:’ui-icon-triangle-1-s’,leaf:’ui-icon-radio-off’}) иконки листьев и ветвей.

С не описанными свойства мы знакомы из предыдущих статей, а другие свойства и методы, характерные только для работы с jqGrid в качестве дерева можно посмотреть на странице TreeGrid.

Прежде чем перейдем к рассмотрению серверных скриптов давайте немного разберемся как работает плагин. Сразу после инициализации, таблица отправляет запрос к серверу, при этом передает следующие данные и ждет ответа сервера:

В режиме ‘nested’ (на примере метода POST)

• POST['nodeid'] – идентификатор узла (ветви)
• POST['n_left'] – позиция узла «слева»
• POST['n_right'] – позиция узла «справа»
• POST['n_level'] – уровень вложенности узла

В режиме ‘adjacency’ (на примере метода POST)

• POST['nodeid'] – идентификатор узла (ветви)
• POST['parentid'] – идентификатор родительского узла
• POST['n_level'] – уровень вложенности узла

кроме этого, на сервер также передаются стандартные для jqGrid параметры (на примере метода POST)

POST['page'] – номер страницы, для «листалки»

POST['rows'] – количество записей, для ограничения при выборке данных

POST['sidx'] – значение index: в colModel, имя столбца по которому необходимо отсортировать результат

POST['sord'] – направление сортировки

После получения данных, серверный скрипт выполняет запрос данных из БД и сроит и выводит результат в следующих форматах.

В режиме ‘nested’ (на примере XML ответа)

• пользовательские столбцы
• level – уровень узла в иерархии
• lft – позиция узла «слева»
• rgt – позиция узла «справа»
• isLeaf – логический признак (true/false), определяет этот узел является «веткой»(есть подузлы) или «листом»(нет подузлов)
• expanded – логический признак (true/false), нужно ли показывать подузлы если этот узел является веткой, т.е. загрузить «открытым» или «закрытым»

В режиме ‘adjacency’ (на примере XML ответа)

• пользовательские столбцы
• level – уровень узла в иерархии
• parent – идентификатор родительского узла
• isLeaf – логический признак (true/false), определяет этот узел является «веткой»(есть подузлы) или «листом»(нет подузлов)
• expanded – логический признак (true/false), нужно ли показывать подузлы если этот узел является веткой, т.е. загрузить «открытым» или «закрытым»

Ядро (ридеры) jqGrid разбирают ответ и вставляют данные в таблицу. Вот теперь серверные скрипты будут более-менее понятны.

Вложенные множества (p3e1_n.php)(опущены подключение к БД и вывод результата)

// Получаем параметры от таблицы
    # ВНИМАНИЕ!!!
    # Данный код не имеет проверок запрашиваемых данных
    # что может стать причиной взлома! Обязательно проверяйте все данные
    # поступающие от клиента

    $node  = intval($_POST['nodeid']);
    $left  = intval($_POST['n_left']);
    $right = intval($_POST['n_right']);
    $level = intval($_POST['n_level']);

// Настраиваем условие для выбора ветки
    $WHERE = '';
    if($node > 0) {
       $level = $level + 1;  // нужно выбрать следующий уровень
       $WHERE = " AND cleft > ".$left." AND cright < ".$right." AND clevel = ".$level;
    }else{
       $level = 0;
    }

// Выбираем подразделы
    $query = "SELECT cid, title, clevel, cleft, cright FROM tree_nested_sets WHERE cleft BETWEEN cleft AND cright ".$WHERE." GROUP BY title ORDER BY cleft;";
    $result = mysql_query($query);

// Формируем результат
    $response->page = 1;
    $response->total = 1;
    $response->records = 1;

    $i = 0;
    while($row = mysql_fetch_assoc($result)) {
        //-------------------------------------
        // Определяем является ли выбранный узел "листом"
        if($row['cright'] == $row['cleft']+1)
            $leaf = 'true';
        else
            $leaf='false';
        //-------------------------------------

        if($level == $row['clevel']){
            $response->rows[$i]['cell'] = array($row['cid'], $row['title'], $row['clevel'], $row['cleft'], $row['cright'], $leaf, 'false');
        }
        $i++;
    }

Матрица смежностей(p3e1_a.php)(опущены подключение к БД и вывод результата)

// Выбираем все разделы без подразделов (листья)
    $query_feafs = "SELECT t1.cid FROM tree_adjacency_matrix AS t1 LEFT JOIN tree_adjacency_matrix AS t2 ON t1.cid = t2.id_parent WHERE t2.cid IS NULL";
    $sql_leafs = mysql_query($query_feafs);

    while($row = mysql_fetch_assoc($sql_leafs)) {
       $leafs[] = $row['cid']; // Массив для хранения "листьев"
    }
    unset($row);

// Получаем параметры от таблицы
    # ВНИМАНИЕ!!!
    # Данный код не имеет проверок запрашиваемых данных
    # что может стать причиной взлома! Обязательно проверяйте все данные
    # поступающие от клиента

    $level  = intval($_POST['n_level']);
    $node   = intval($_POST['nodeid']);

// Настраиваем условие для выбора ветки
    if($node > 0) {
       $level = $level + 1;            // нужно выбрать следующий уровень
       $WHERE = 'id_parent ='.$node;
    } else {
       $WHERE = 'id_parent IS NULL';   // выбрать корень(ни)
    } 

// Выбираем подразделы
    $query  = "SELECT cid, title, id_parent FROM tree_adjacency_matrix WHERE ".$WHERE;
    $result = mysql_query($query);

// Формируем результат
    $response->page      = 1;
    $response->total     = 1;
    $response->records   = 1;

    $i = 0;
    while($row = mysql_fetch_assoc($result)) {
       //-------------------------------------
       // Определяем ID родителя этого узла
       if(!$row['id_parent'])
           $parent = 'NULL';
       else
          $parent = $row['id_parent'];
       //-------------------------------------
       // Определяем является ли выбранный узел "листом"
       if(in_array($row['cid'], $leafs))
           $is_leaf = 'true';
       else
           $is_leaf = 'false';
       //--------------------------------------

       $response->rows[$i]['cell'] = array($row['cid'], $row['title'], $level, $parent, $is_leaf, FALSE);

       $i++;
    }

Я считаю комментировать в этих листингах особо нечего, кроме того что данные поступающие с сервера не ограничиваются по кол-ву записей и не сортируются. А практически все остальное является повторением примеров из предыдущих статей или специфическими вещами при работе с деревьями, описанными в статьях приложенных выше. Также обращу ваше внимание на то, что пример работы с Nested Set Model описанный в документации разработчиком не хотел работать, пришлось его доводить, за что мне большое спасибо .

3)jqGrid и статические деревья
Название статические деревья оносительно, того что мы делали немного ранее. Безусловно данные «загруженные» таким способом могут быть построены и скриптом динамически, но все же бывают такие задачи, когда дерево уже есть необходимо лишь вывести его в дружественной для пользователя форме как в ДЕМО3.2 . Не правда ли что-то напоминает? Да! это меню из демо jqGrid от разработчика.

Листинг клиентской части:

  $('#table').jqGrid({
            url: "tree.xml",
            datatype: "xml",
            height: "auto",
            pager: false,
            loadui: "disable",
            colNames: ["id","Items","url"],
            colModel: [
                {name: "id",width:1,hidden:true, key:true},
                {name: "menu", width:150, resizable: false, sortable:false},
                {name: "url",width:1,hidden:true}
            ],
            treeGrid: true,
                    caption: "jqGrid Demos",
            ExpandColumn: "menu",
            width: 200,
            rowNum: 200,
            ExpandColClick: true,
            treeIcons: {leaf:'ui-icon-document-b'}
 });

Полностью идентичные параметры плагина, за исключением того, что я отключил обработчик события onSelectRow.
Из листига должно стать понятно, что таблица запрашивает статичный(оносительно) файл tree.xml, который выглядит так

<?xml version='1.0' encoding="utf-8"?>
<rows>
    <page>1</page>
    <total>1</total>
    <records>1</records>
    <row><cell>1</cell><cell>Loading Data</cell><cell></cell><cell>0</cell><cell>1</cell><cell>10</cell><cell>false</cell><cell>false</cell></row>
    <row><cell>2</cell><cell>XML Data</cell><cell>xmlex.html</cell><cell>1</cell><cell>2</cell><cell>3</cell><cell>true</cell><cell>true</cell></row>
    <row><cell>3</cell><cell>JSON Data</cell><cell>jsonex.html</cell><cell>1</cell><cell>4</cell><cell>5</cell><cell>true</cell><cell>true</cell></row>

...

</rows>

Т.е. jqGrid просто разбирает данные из этого файла и строит TreeGrid.

II. Связывание данных в jqGrid

Иногда при построении какого либо приложения необходимо как то сгруппировать данные для экономии визуального пространства на странице и при этом иметь возможность как можно быстрее и комфортнее получить доступ к более детальной информации или связанной с текущей. Немного сумбурно получилось , но надеюсь вы меня поняли, а если не поняли то примеры разложат все по полочкам.

1)Простая подтаблица (subgrid)

Это весьма полезная опция у этого плагина. На ДЕМО3.3 обратите внимание на крестик в крайнем правом столбце таблицы. При клике на нем под выбранной строкой распахивается «карман» в котором находится небольшая табличка с названиями городов и прочей «рыбой». Вот пример группировки. Теперь давайте перейдем к листингам.

$('#table').jqGrid({
       url:'p3e3.php',
       datatype: 'json',
       mtype: 'POST',
       colNames:['Код страны','Cтрана',''],
       colModel :[
          {name:'country_code', index:'country_code', width:80, hidden: true},
          {name:'country_name', index:'country_name', width:60},
          {name:'description', width:200, sortable: false}
          ],
       pager: $('#tablePager'),
       rowNum: 100,
       scroll: true,
       viewrecords: true,
       sortname: 'country_name',
       sortorder: 'asc',
       width: 700,
       height: 400,
       subGrid: true,
         subGridUrl: 'p3e3.php?get=subgrid',
         subGridModel:[{
                     name :  [' ','Город', 'Широта', 'Долгота'],
                     width:  [40, 200, 150, 150],
                     align:  ['center','left','right','right'],
                     params: ['country_code','country_name']
                 }]
});

Как видите, абсолютно обыкновенный jqGrid, но в «настройках» есть несколько интересных моментов:

• subGrid: – в строке 19. Эта опция позволяет использовать подтаблицу.
• subGridUrl: – указывает путь к скрипту, который должен вернуть данные для построения подтаблицы. В данном случае происходит запрос к тому же скрипту, который «обслуживает» и таблицу-родителя при этом передав ему параметр get со значением subgrid
• subGridModel: – свойство которое задает параметры подтаблицы. Аналогично colModel таблицы-родителя

subGridModel: – представляет из себя массив с объектом, у которого есть свои параметры. name, width и align уверен их имена говорят сами за себя, это тексты заголовков столбцов, ширины соответствующих столбцов и выравнивание в них соответственно. Более интересным будет свойство params. Оно позволяет передать значения из каких то ячеек родительской таблицы на сервер при запросе подтаблицы. Иными словами, когда вы нажмете на крестик , открывающий подтаблицу, происходит запрос к серверу которому передается клоч (id) записи (в нашем случае это country_code) и плос к этим данным можно передать дополнительные (в нашем случае серверу будет передан еще и country_name). А вот на сервере получив значения нужных параметров (в этом примере серверный скрипт просто игнорирует значение параметра country_name) вы выполняем запрос к БД и выводим JSON объект с данными.

...
$get = $_REQUEST['get'];  // Параметр указывающий на то
                                    //  что мы запросили информацию для подтаблицы
...
switch ($get){
    case 'subgrid':
        // Выбрать города запрошенной страны
        $id =$_REQUEST['id'];

        // Запрос данных
        $query = "SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities  WHERE country_code LIKE '".$id."'";

        $result = mysql_query($query);
        if(mysql_num_rows($result) >= 1){
            // Строки данных для таблицы
            $i = 0;
            while($row = mysql_fetch_assoc($result)) {
                $data->rows[$i]['cell'] = array($i+1,'<strong><em>'.$row['city'].'</em></strong>',$row['latitude'],$row['longitude']);
                $i++;
            }
        }
        break;

    default:
        // Выбрать названия стран и сосчетать города
        ...

}
// Вывести результат
...

Серверный скрипт особо ничем не отличается от рассмотренных в предыдущих примерах. При этом он разбит на две части оператором switch. Который по умолчанию выполняет «стандартную» обработку и вывод данных для главной таблицы. А вот если этот скрипт запустить передав ему параметр get (я выбрал такое имя только ради наглядности) тогда будет выполнена выборка данных для подтаблицы. Ну и если у вас чешутся руки поковырять пример, вы можете скачать его.

Подтаблицы это замечательный инструмент, который позволяет очень элегантно организавать данные, но при этом имеет один существенный недостаток – подтаблица «не живая». Т.е. данные в подтаблице не могут сортироваться, нет возморжности реализовать поиск и т.д. А это очень критично если в подтаблице будет выводиться много записей. Однако это ограничение отпадает само собой при использовании jqGrid как подтаблицы.

2)jqGrid как subgrid
Итак начнем с промотра ДЕМО3.4. Как видите все тот же «родной» jqGrid с названиями стран, и кол-вом городов в этой стране, но при этом подтаблица теперь представляет из себя самую настоящую jqGrid со всеми свойствами и методами. Согласитесь, что так работать намного приятнее и удобнее.

А вот здесь самое интересное – клиентский код (в листинге опущены все настройки родительской таблицы, кроме одного свойства):

...
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
    var subgrid_table_id;
    subgrid_table_id = subgrid_id+'_t';

    $('#'+subgrid_id).html('<table id="'+subgrid_table_id+'"></table><div id="'+subgrid_table_id+'_pager"></div>');
    $('#'+subgrid_table_id).jqGrid({
        url: 'p3e4.php',
        datatype: 'json',
        mtype: 'POST',
        postData: {'get':'subgrid', 'id':row_id},
        colNames: ['Город', 'Широта', 'Долгота'],
        colModel: [
            {name: 'city', index: 'city', width:130},
            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
            ],
        height: 'auto',
        autowidth: true,
        rownumbers: true,
        rownumWidth: 40,
        rowNum: 10,
        sortname: 'city',
        sortorder: 'asc',
        pager: $('#'+subgrid_table_id+'_pager'),
        rowNum:10,
        rowList:[10,20,50,100]
    });
}
...

Настройки таблицы-родителя идентичные предыдущему примеру, но при этом появилось новое свойство subGridRowExpanded. Думаю самые догадливые поняли, а самые любопытные прочли в документации в секции Subgrid, что subGridRowExpanded не просто свойство, а событие.

subGridRowExpanded – это событие возникает когда пользователь кликает на крестик раскрытия подтаблицы и выполняет определенную функцию при распахивании «кармана» для подтаблицы. При этом в функцию обработчик будут переданы 2 параметра:

• pID – уникальный идентификатор «кармана» (контейнера, если хотите) который открывается под выбранной строкой
• id – идентификатор записи под которой открылся «карман»

Безусловно существуют еще события, о которых вы можете узнать из документации. А мы пока пробежимся по листингу. Итак когда пользователь «тыцнул» на крестик, открывается контейнер и выполняется функция. Которая получает 2 параметра subgrid_id и row_id. Далее в строке 5 создаем строковое значение для атрибута id и в 6й строке используем метод jQuery, который вставляет в «карман» (кстати сказать что это обыкновенный DIV) html разметку таблицы и DIV’a. А далее идет бональная инициализация jqGrid для только что созданной разметки. Т.е. фактически мы просто напросто динамически создали разметку и создали jqGrid! В этот момент я воскликнул «Тааак!» и потер руки. Почему? Да потому, что зная id объекта (<div id="someid">…</div>) с помощью jQuery можно сотворить с ним все что угодно. Но прежде чем мы перейдем к следующему примеру я приведу ссылку на раздаточный материал по теме – это пример который только что расмотрели.
А теперь зная id контейнера давайте, еще добавим наглядности нашему примеру со странами и городами, например как на ДЕМО3.5. Как видите все эта же, скучная таблица со странами, но теперь при клике на крестик открывается подробная информация и флаг выбранной строки. Под которой свернутая jqGrid таблица с перечнем городов. Этот пример вы можете скачать перейдя по этой ссылке. Внутри архива все скрипты, но наибольший интерес представляет клиентский код. Я условно разделю его на 2 части, первая (нижняя) часть:

$('#table').jqGrid({
          ...
          subGrid: true,
          subGridRowExpanded: function(subgrid_id, row_id) {
                       getCountryDetails(subgrid_id, row_id);
                   }

});

Это таблица из предыдущего примера, но теперь при возникновении события subGridRowExpanded будет выполнена пользовательская функция getCountryDetails(), которая и является 2 половиной клиентского скрипта:

function getCountryDetails(container, countryCode){
    $.ajax({
            type: 'post',
            url: 'p3e5.php',
            data: ({'id': countryCode, 'get': 'details'}),
            dataType: 'json',
            success: function(server){
                $('#'+container).html('<div class="c_detail"><img src="files/images/'+server.flag+'"><ul><li><strong>Столица:</strong> '+server.capital+'</li><li><strong>Дата независимости:</strong> '+server.independence_date+'</li><li><strong>Официальные языки:</strong> '+server.off_lng+'</li><li><strong>Форма правления:</strong> '+server.government+'</li><li><strong>Глава правительства:</strong> '+server.president+'</li><li><strong>Валюта:</strong> '+server.currency+'</li><li><strong>Интернет-домены:</strong> '+server.domains+'</li><li><strong>Телефонный код:</strong> '+server.dialing_code+'</li><li><strong>Часовой пояс:</strong> '+server.time_zone+'</li></ul></div>');

                var subgrid_table_id = container+'_t';

                $('#'+container).append('<table id="'+subgrid_table_id+'"></table><div id="'+subgrid_table_id+'_pager"></div>');
                $('#'+subgrid_table_id).jqGrid({
                          caption: 'Города',
                          hiddengrid: true,
                          url: 'p3e4.php',
                          datatype: 'json',
                          mtype: 'POST',
                          postData: {'get':'subgrid', 'id':countryCode},
                          colNames: ['Город', 'Широта', 'Долгота'],
                          colModel: [
                            {name: 'city', index: 'city', width:130},
                            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
                            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
                          ],
                          height: 'auto',
                          autowidth: true,
                          rownumbers: true,
                          rownumWidth: 40,
                          rowNum: 10,
                          sortname: 'city',
                          sortorder: 'asc',
                          pager: $('#'+subgrid_table_id+'_pager'),
                          rowNum:10,
                          rowList:[10,20,50,100]
                });
            }
    });
}

В теле этой функции выполняется AJAX запрос, передающий серверному скрипту 2 параметра методом POST:

• id – идентификатор записи, в нашем случае это сокращенный код страны
• get – этот параметр указывает, что мы хотим получить с сервера детальную информацию по выбранной стране

После того как запрос будет успешно выполнен (см. строку 8), в открывшийся под выбранной строкой контейнер будет помещена какая-то HTML разметка с полученными с сервера данными. В данном примере такая разметка представлена не нумированным списком в картинкой – флагом страны. После этого в этот же контейнер помещается разметка для дочерней таблицы и производится инициализация дочерней таблицы.

В принципе логика работы достаточно проста, главное не забывать что работать с полученными от сервера данными можно только после окончания AJAX запроса или производя синхронные запросы.

Как вы понимаете в контейнер для подтаблицы можно помещать не только какую-то примитивную разметку, но и формы, флеш, другие «вкусные» и полезные вещи.

3)Ведущая и ведомая jqGrid

Однако не всегда можно сгруппировать данные и засунуть их в подтаблицу. Иногда данные могут быть полностью самостоятельными и при этом иметь некую связь. Например однажды передо мной стала задача вывести пользователю перечень счетов и платежей по этим счетам, и при этом обеспечить возможность просмотра счетов, платежей и платежей по выбранному счету. И тут то мне очень помогла методика «ведущий-ведомый». Работа которой проиллюстрирована в ДЕМО5.6.

Имеется две jqGrid, отображающие страны и города, которые можно менять местами благодаря плагину sortable. Также в верхней части документа есть checkbox который включает функцию фильтрации содержимого ведомой (нижней) таблицы, на основе выбранной записи в ведущей (верхней) таблице. При этом вся фильтровка осуществляется на стороне сервера, с этого и начнем разбор примера. Для удобства две таблицы запрашивают данные у двух отдельных серверных скриптов, один для городов, другой для стран.
Скрипт для таблицы «Города» (т.к. основная структура скрипта «стандартна» я привожу лишь основные моменты):

// Получение параметров page, rows и т.д.
...
if($_REQUEST['filterBy'] != 'null')  // Фильтр
    $WHERE = " WHERE country_code = '".$_REQUEST['filterBy']."' ";
else
    $WHERE = '';
...
// Запрос подсчета суммарного кол-ва записей
$result = mysql_query("SELECT COUNT(*)AS count FROM cities".$WHERE);
...
// Запрос выборки данных
$result = mysql_query("SELECT city, latitude, longitude FROM cities ".$WHERE." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit);

В данном случае клиентский код при запросе данных с сервера помимо «стандартных» параметров, отправляет еще и дополнительный параметр filterBy, который по сути и определяет критерий по которому нужно выбрать записи из БД и вернуть клиенту. Что и проиллюстрировано в последующих запросах.

Скрипт для таблицы «Страны»:

// Получение параметров page, rows и т.д.
...
if($_REQUEST['filterBy'] != 'null'){
     $country = @mysql_fetch_array(mysql_query("SELECT country_code FROM cities WHERE id = ".$_REQUEST['filterBy']));
     $WHERE = " WHERE country_code = '".$country['country_code']."' ";
}else{
     $WHERE = '';
}
...
// Запрос подсчета суммарного кол-ва записей
$result = mysql_query("SELECT COUNT(*)AS count FROM countries ".$WHERE);
...
// Запрос выборки данных
$result = mysql_query("SELECT * FROM countries ".$WHERE." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit);

Как видите полная аналогия предыдущего листинга, но теперь если передано определенное значение фильтра, происходит дополнительный запрос для уточнения кода страны.
На этом все премудрости серверной стороны заканчиваются и начинается клиентский код, но прежде чем перейти к его рассмотрению пара слов о разметке страницы:

<input type="checkbox" id="link">
<label for="link">Связать таблицы</label>

<div id="interfaceBody" style="margin: 10px 10px 10px 10px; padding: 0px 10px 10px 10px; border: 2px solid gray">
<div class="grid" id="countries" style="padding: 10px 10px 10px 10px; margin-top: 10px; border: 2px solid red">
    <table id="table_countries"></table>
    <div id="table_countriesPager"></div>
</div>
<div class="grid" id="cities" style="padding: 10px 10px 10px 10px; margin-top: 10px; border: 2px solid green">
    <table id="table_cities"></table>
    <div id="table_citiesPager"></div>
</div>
</div>

Если не обращать внимание на ужасно длинные inline-стили, то разметка достаточно проста. Сначала идет код checkbox’a с меткой, а следом контейнер всего интерфейса, внутри которого два дочерних контейнера, по одному для каждой таблицы.

И наконец клиентский скрипт:

//-------------------------------------------------------------------
// Функция-обработчик
function stickTogether(){
    if($('#link').is(':checked')){
        // Флаг "Связать таблицы" утановлен
        var masterId        = $('#interfaceBody > DIV:first').attr('id');                //Определяем ID контейнера "ведущей таблицы"
        var masterPostData  = $('#table_'+masterId).jqGrid('getGridParam','postData');   //Получаем весь объект postData "ведущей таблицы"
        var selId    = $('#table_'+masterId).jqGrid('getGridParam','selrow');            //Получаем id записи в выделенной строке
                                                                                         //не путайте с rowIndex
        // Проверяем какое текущее значение фильтра ведущей таблицы, он должен быть сброшен (например null)
        if(masterPostData.filterBy){
            $('#table_'+masterId).jqGrid('setGridParam',{'postData':{'filterBy':null}}); //Сбрасываем значение фильтра
            $('#table_'+masterId).trigger('reloadGrid');                                 //Перезагружаем данные в таблицу
        }

        var slaveId  = $('#interfaceBody > DIV:last').attr('id');                        //Определяем ID контейнера "ведомой таблицы"
        $('#table_'+slaveId).jqGrid('setGridParam',{'postData':{'filterBy':selId}});     //Применяем в качестве фильтра ведомой таблицы
                                                                                         //id выбранной записи в ведущей таблице
        $('#table_'+slaveId).trigger('reloadGrid');                                      //Перезагружаем данные в таблицу
    }else{
        // Флаг "Связать таблицы" не утановлен
        var coutriesT       = $('#table_countries');
        var countriesPost   = coutriesT.jqGrid('getGridParam','postData');

        if(countriesPost.filterBy){ //Сбрасываем фильтр т.к. ничего не нужно фильтровать
            coutriesT.jqGrid('setGridParam',{'postData':{'filterBy':null}})
            coutriesT.trigger('reloadGrid');
        }
        //-----------------------
        var citiesT       = $('#table_cities');
        var citiesPost    = citiesT.jqGrid('getGridParam','postData');

        if(citiesPost.filterBy){ //Сбрасываем фильтр т.к. ничего не нужно фильтровать
            citiesT.jqGrid('setGridParam',{'postData':{'filterBy':null}})
            citiesT.trigger('reloadGrid');
        }
    }
}
//-------------------------------------------------------------------
// Настройка плагинов
var tcountries = $('#table_countries').jqGrid({
                          caption: 'Страны',
                          hidegrid: false,
                          url:'p3e6_countries.php',
                          postData: {'filterBy':null},
                          datatype: 'json',
                          mtype: 'POST',
                          colNames:['Код страны','Cтрана','Столица','Домены'],
                          colModel :[
                                    {name:'country_code', index:'country_code', width:80, hidden: true},
                                    {name:'country_name', index:'country_name', width:60},
                                    {name:'capital', index:'capital', width:60},
                                    {name:'domains', index:'domains', width:60}
                                    ],
                          pager: $('#table_countriesPager'),
                          rowNum: 100,
                          scroll: true,
                          viewrecords: true,
                          sortname: 'country_name',
                          sortorder: 'asc',
                          height: 200,
                          autowidth: true,
                          onSelectRow: stickTogether
                });

var tcities = $('#table_cities').jqGrid({
                          caption: 'Города',
                          hidegrid: false,
                          url: 'p3e6_cities.php',
                          postData: {'filterBy':null},
                          datatype: 'json',
                          mtype: 'POST',
                          colNames: ['Город', 'Широта', 'Долгота'],
                          colModel: [
                            {name: 'city', index: 'city', width:130},
                            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
                            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
                          ],
                          height: 200,
                          autowidth: true,
                          rownumbers: true,
                          rownumWidth: 40,
                          rowNum: 100,
                          sortname: 'city',
                          sortorder: 'asc',
                          pager: $('#table_citiesPager'),
                          scroll: true,
                          viewrecords: true,
                          onSelectRow: stickTogether
                });

$("#interfaceBody").sortable({
        connectWith: '.grid',
        placeholder: 'ui-state-error',
        opacity: 0.7,
        stop: stickTogether
});

//-------------------------------------------------------------------
// Назначаем обработчик на событие
$('#link').change(stickTogether);

При всем своем объеме код достаточно груб и прост. Начнем пожалуй с назначения обработчика на изменение checkbox’a, самая последняя строка в листинге. Как видите при изменении checkbox’a будет вызвана функция stickTogether. В теле которой происходит проверка состояния флажка и если он не установлен, то произойдет сброс всех «фильтров» таблиц и перезагрузка данных в таблице.
Но самое интересное это код в «положительной» ветке if’а, когда флажок установлен. Мы знаем, что ведущая таблица расположена вверху, значит для начала узнаем какая же таблица в данный момент находится там. Для этого получаем значение атрибута id первого контейнера (строка 6). Теперь зная какая таблица ведущая – получаем объект postData, который, напомню, содержит все параметры и их значения для отправки серверу. В 7й строке получим Id записи в выделенной строке ведущей таблицы. Далее проверив значение фильтра ведущей таблицы, при необходимости сбросим его. Это необходимо если пользователь поменял таблицы местами.
В строке 16 узнаем id контейнера ведомой таблицы. И применяем фильтр, записав id выделенной строки в ведущей таблице, и перезагружаем данные.
У данного скрипта есть один недостаток – расплата за универсальность. Из-за того что на событие onSelectRow: в обоих таблицах определен один и тот же обработчик stickTogether, при выделении строки в ведомой таблице, происходит постоянное обновление ее записей. Но уверен что те кому потребуется такой функционал jqGrid без труда смогут это исправить.

Заключение
Подведя итоги проделанной работы можно сказать, что в данной статье мы рассмотрели практически все варианты расширенного использования плагина. Научились работать с древовидными данными и подтаблицами, а также попробовали управлять содержимым ведомой таблицы посредством данных из ведущей. В следующей части я рассмотрю еще одну экзотическую интересную опцию jqGrid – «drag’n'drop записей между jqGrid’ами».
Ну и как всегда если у вас возникли вопросы задавайте их на форуме ну а комментарии используйте для предложений и пожеланий.

Итак приблизительный план работ на следующий выпуск:

• Расширенные возможности jqGrid
  • drag’n'drop записей между jqGrid’ами
• Поиск данных в jqGrid
  • «inline» поиск
  • поиск с использованием встроенной формы
  • расширенный поиск с использованием встроенной формы
  • поиск с использованием внешней формы

В этом цикле статей я хочу рассказать о таком замечательном фреймворке, как yii. Предполагается, что у читателя есть некоторый навык работы с php5, особенно с его объектно-ориентированной частью. Я буду стараться охватить как можно больше разных аспектов создания веб-приложений на базе yii, добавляя от себя разные тонкости и хитрости; но не ждите от меня копипаста документации или api. И то и другое Вы можете найти на официальном сайте.

Введение

Что такое Yii?

Yii это свободный(распространяется под new BSD licence) высокопроизводительный объектно-ориентированный расширяемый php-фрэймворк для разработки веб-приложений.

Зачем он нужен?

Для удобной разработки веб-приложений и чтобы не изобретать сто раз изобретенный велосипед.

Основные особенности :

• MVC-архитектура
• Работа с базами данных
• Поддержка кэширования на разных уровнях
• Большое количество встроенных компонентов
• Возможность простого подключения сторонних библиотек
• Интеграция с jQuery

Подготовка:

Системные требования:

• Веб-сервер(рекомендуется Apache)
• PHP версии не ниже 5.1.0
• PDO-совместимая СУБД (MySql, PostgreSQL, SqLite, Microsoft SQL, Oracle8) и соответствующее php-расширение для её поддержки.

Рекомендуемые расширения для php:

• gd – для работы с графикой.
• mcrypt – для функций кодирования.
• MemCache или APC – для кэширования, ускорения работы.

Такой нехитрый набор в наше время можно найти почти на любом хостинге.

Для домашнего тестирования на linux можно установить пакеты из стандартных репозитариев.Если же Вы предпочитаете на windows, могу порекомендовать в качестве готового решения denwer.

Для пользователей денвера:

(В данном случае, Z: это диск, монтируемый денвером)
1. Для начала прописываем в переменные окружения путь  Z:\usr\local\php5\
2. Открываем /usr/local/php5/php.ini, ищем строчку extension_dir = «/usr/local/php5/ext», заменяем на extension_dir = «Z:\usr\local\php5\ext»
3. session.save_path = «/tmp» на session.save_path = «Z:\tmp»

Установка:

На момент написания статьи, последняя стабильная версия была 1.1.0. Скачать её можно в виде архива по адресу  http://yiiframework.com/download
Вся установка сводится к распаковке содержимого архива.Для начала рекомендую распаковать всё в директорию доступную из веб и открыть папку requirments в браузере, чтобы убедиться в наличии всех необходимых компонентов.

Для создания приложения необходимо использовать коммандную строку(ssh при удалённом доступе). Нужно запустить файл yiic.bat(для windows) или yiic(для linux и других unix-based систем) с параметрами webapp /full/path/to/new/wbebapp/.
Например :

$ /var/www/framework/yiic webapp /var/www/testing

Убедитесь, что у вас есть права записи в директорию, где Вы хотите создать веб-приложение и она доступна из web. Можно зайти в нее через браузер и увидеть возможности, предоставлямые yii «из коробки».

Практикой мы займемся в следующей статье, а теперь немного теории.

Модель – Представление – Контроллер(MVC) – это модульная архитектура, применяющийся в веб-программировании(в частности и в yii). Она направлена на разделение логики(контроллер), управления данными(модель) и пользовательского интерфейса(представление) с целью возможности изменять одни части не внося изменения в другие.

Основные части, из которых состоит yii:

В yii имена всех системных классов начинается с перфикса C , с целью недопущения коллизии имён. По этому, пожалуйста, воздержитесь от использования этого префикса в своих классах.

Входной файл
Входной файл(обычно index.php) это единственный скрипт, с которым контактирует пользователю. Вобщем-то, всё что он делает, это читает конфигурацию и создаёт экземпляр класса CWebApplication.
Приложение(application)
Приложение(экземпляр класса CWebApplication) обрабатывает запрос пользователя, выполняет роутинг и передаёт его на исполнение соответствующему контроллеру.
Контроллер(controller)
Контроллер(экзэмпляр класса CController или производного от него) определяет основную логику приложения, взаимодействует с моделями и отображениями. Контроллеры обычно находятся в папке /protected/controllers. По соглашению, класс контроллера и имя файла с ним : NameController.php
Действие(action)
Действие это тип действия, выполняемого пользователем, например просмотр статьи в блоге или отправка комментария. Обычно является методом контроллера(вида actionName), но может быть вынесенно в отдельный класс.
Модель (model)
Модель представляет собой сущность данных. Например таблица в базе данных(CActiveRecord) или форма на веб-странице(CForm). Она занимается непосредственной обработкой данных: созданием, получением, изменением. Также представляет интерфейс доступа к валидаторам(validator), проверяющим корректность введённых пользователем данных. Модели находятся в папке /protected/models. Модель обычно имеет имя, соответствующее таблице в бд, которую она представляет.
Представление(view)
Представление генерирует готовые части страницы, отдаваемой пользователю.Оно не использует логики, кроме как условий и циклов. Представления для каждого контроллера обычно раздельны и хранятся в /protected/views/controllername/.
Макет (layout)
Макет это специальное представление для вставки других представлений. Обычно он содержит части пользовательского интерфейса, используемого другими представлениями. Например, основной макет может содержать в себе шапку и подвал страницы, места для подключения других представлений и виджетов. Макеты храняться в /protected/views/layouts. По умолчанию используется макет main.php.
Виджет(widget)
Виджет это компонент для генерации самодостаточного элемента пользовательского интерфейса(например, верхнее меню в тестовом приложении). В zii (библиотеке расширений, поставляемых вместе с yii) имеется большое количество готовых виджетов.
Компонент(component)
Представляет сущность какого-либо аспекта веб-приложения. Например, авторизация пользователей. В yii много готовых компонентов, которые могут использоваться как в готовом виде, так и расширяться веб-разработчиками.
Модуль(module)
Модуль, это самодостаточная единица, состоящая из контроллеров, моделей, отображений, и.т.д. Модули используются для разделения сайта на логические части, например форум и блог.

Заключение

В первой статье мы узнали, что такое yii, познакомились с базовыми понятиями и подготовили полигон для дальнейшего изучения.

И на последок хочу дать несколько полезных ссылок:

Оффициальный сайт (en)

Русскоязычное сообщество (ru)

Блог, посвящённый yii (ru)

В следующей статье:

В следующей статье мы познокомимся со внутренним устройством фреймворка, научимся делать собственные контроллеры, модели и отображения, изучим основы ActiveRecord.