Pull to refresh

Предложение по добавлению связывания данных

Reading time4 min
Views1.9K
Original author: Dave Reed
Привет всем!

Я разработчик из команды Microsoft ASP.NET. Наша команда выдвигает предложение по поддержке связывания данных (data linking) в jQuery и мы хотели бы услышать ваши отзывы.

Ниже я расскажу про связывание в общем плане, более подробное объяснение вы можете найти на специальной wiki-странице:

http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal

Мы создали прототип связывания данных и опубликовали его на github:

http://github.com/nje/jquery-datalink

Репозиторий включает в себя demo-contacts.html, который показывает использование связывание данных на практике и который так же использует ранее предложенную нами библиотеку шаблонов jQuery (jQuery templating library). Я предлагаю вам попробовать демонстрацию, так как примеры опубликованные в wiki и в этой статье всего лишь показывают работу с API и не передают всей полезности плагина так, как это делает демонстрация.

Термин “связывание данных” (data linking) используемый в статье означает: “автоматическое связывание поля одного объекта с полем другого объекта”. Это означает, что когда два объекта связаны, при изменении значения одного из объектов (источника) автоматически изменяется значение другого объекта (цели). Связывание может происходить между любыми двумя объектами, такими как простые объекты (plain objects), массивы, элементы DOM или плагины браузера.

Пример

В этом простом примере вы связываете элемент ввода с полем объекта:

image

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

attrChange
Событие 'attrChange' возникает тогда, когда атрибут элемента DOM или объект изменяются методами jQuery.fn.attr или jQuery.attr. Интересной особенностью этого плагина является то, что он позволяет использовать jQuery.fn.attr для простых объектов и массивов. Методы data(), bind() и trigger() так же работают с простыми объектами, так что это естественное расширение, которое уже во многом применимо в jQuery.

Тем не менее, небольшое изменение в jQuery.attr необходимо для того, чтобы избежать особых случаев когда цель является простым объектом. Например, переименовать class в className, readonly в readOnly, изменить поведение когда отрицательные значения width игнорируются и другие случаи. После этого появляется официальная возможность использования attr() для установки полей у объектов, как вы и могли того ожидать.

image

Событие attrChange может быть так же использовано для захвата изменений производимых через методы val() и data(). Обратите внимание, что предлагается специальное соглашение о том, как изменение представляется событием. Объединение разных изменяющих данные методов вызывающих одно и тоже событие позволяет проще обрабатывать событие и предотвращает потребность в раздельных событиях “dataChange" и «valChange». Было бы хорошо, на самом деле, если бы attr() был продуман как основной метод для изменения и поддерживал бы такие конструкции. Например, $(..).attr(“data:foo”, “bar”) или $(..).attr(“val”, “123”). Пока, это не реализовано и открыто для обсуждения.

image

attrChanging
Плагин так же возбуждает событие перед изменением, давая обработчику возможность отменить операцию. Это не обязательный функционал для поддержки связывания, а простое добавление включенное здесь для обсуждения. Событие 'attrChanging' возникает когда атрибут элемента DOM или объекта должен быть изменен. Метод ev.preventDefault() может быть вызван для предотвращения изменения.

image

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

image

Доступны следующие события изменений массива в виде статических методов для объекта jQuery: push, pop, splice, shift, unshift, reverse, sort. Аргументы для каждого из них задаются так же, за исключением того, что первым аргументом идет массив.

Как и 'attrChange', событие 'arrayChange' поддерживает фильтрацию по операциям.

image

arrayChanging
Тоже самое, что и событие attrChanging, только для массивов. Операция может быть отменена через метод ev.preventDefault().

Связывание объектов (Linking Objects)
Когда объекты связаны, изменения в одном автоматически направляются в другой. К примеру, это позволяет вам очень быстро и просто связать поля формы с объектом. Любые изменения в полях формы будут автоматически отправлены в объект, избавляя вас от написания кода. Более того, встроенная поддержка конвертеров позволит вам изменять формат или тип значения на лету между объектами (например, форматирование телефонного номера или парсинг строки в число).

jQuery.fn.linkTo
Устанавливает связь, которая направляет изменения любого объекта-источника в один объект-цель.

image

Так же поддерживается передача в настройках объекта вместо множества параметров.

image

jQuery.fn.linkFrom
Устанавливает связь, которая вытягивает изменения из одного объекта-источника для каждого объекта-цели.

image

jQuery.fn.linkBoth
Устанавливает двойную связь, связывая два объекта друг с другом. Изменение любого объекта направляется в другой объект. Эквивалентом является вызов сразу linkTo и linkFrom.

image

jQuery.convertFn
Часто возникает необходимость в модификации значения на лету с одной стороны связи на другу. Для примера: конвертация null в “None”, форматирование или парсинг строки в число. API связывания поддерживает указание функции конвертирования, как через определение в jQuery.convertFn, так и самой по себе.

Плагин поставляется с одним готовым конвертером названным “!”, который является примером реализации конвертера.

image

Функции конвертера принимают значение в первом параметре. Они так же принимают настройки объекта, который соответствует параметрам переданным при использовании API связывания. Это позволяет вам легко параметризировать конвертер.

image

Мы с нетерпением ожидаем вашего отзыва!

— Дейв Рид (Dave Reed)
Tags:
Hubs:
Total votes 68: ↑50 and ↓18+32
Comments40

Articles