Intercooler.js Декларативный Ajax

WinAx

Как создать динамический клиент, не написав ни строчки клиентского JavaScript? Легко — используйте intercooler.js для реализации декларативного Ajax.

Intercooler.js

Отношения клиент-сервер на веб-странице непростые. Как лучше всего связать статические объекты HTML с конечными точками сервера? Один особенно простой способ — использовать Intercooler.js, который делает Ajax декларативным.

Самая большая проблема intercooler.js в привлечении новых пользователей — это донести идею того, что он делает.

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

Это все управляемо, но это большой объем кода, и большая его часть довольно стандартна. Intercooler.js позволяет выполнять такое же динамическое обновление, но без необходимости писать какой-либо код на стороне клиента.

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

<span ic-src="/stocklevel">
    No Stock Level
</span>

где URL-адрес определяет конечную точку, содержащую данные, которые будет отображать диапазон.

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

<button ic-post-to="/stocklevel">
    Get Stock Level
</button>

затем, когда кнопка нажата, сообщение отправляется по URL-адресу, и ответ от сервера автоматически вставляется в любые связанные с ним элементы — в данном случае span.

Обратите внимание, что теперь у вас есть полное обновление клиент-сервер, но без написания ни одной строчки клиентского кода. В этом смысле это декларативный подход. Вы привязываете элементы к URL-адресам в качестве источников данных и настраиваете другие элементы с атрибутами действия для тех же URL-адресов, и все просто работает. Когда происходит действие, связанные элементы обновляются.

Принципы таковы:

Элементы HTML декларативно привязаны к конечным точкам HTTP с полным REST через стандартные команды HTTP (GET, POST и т. Д.)

Зависимости между элементами кодируются в их привязках пути к REST.

Ответы сервера — это HTML-фрагменты, которые будут заменены содержимым существующего элемента.

Конечно, есть еще несколько атрибутов intercooler.js, которые вы можете использовать для достижения более сложного поведения, но это основная идея.

Если вам нравится идея динамических обновлений без написания собственного кода на стороне клиента, тогда вам нужно прочитать руководство intercooler.js — все довольно просто.

Используемый шаблон иногда называют PVC контроллера частичного представления;

Предоставлено: веб-сайт Intercooler.js.

Другими примерами фреймворков из ПВХ являются Turbolinks и pjax.

intercooler.js имеет открытый исходный код, для работы требуется jQuery, и его можно использовать отдельно или с рядом других фреймворков.

Одним из больших преимуществ intercooler.js является то, что он настолько прост и позволяет легко увидеть взаимосвязи между элементами в HTML.


Добавить комментарий