Расширение `client-side-templates`

Это расширение поддерживает преобразование ответа запроса JSON/XML в HTML с помощью клиентской шаблонизации перед его заменой в DOM. В настоящее время поддерживаются четыре клиентских шаблонизатора:

При добавлении этого расширения к элементу, любые элементы, расположенные ниже его в DOM, могут использовать один из четырёх атрибутов с именем <template-engine>-template (например, mustache-template) со значением ID шаблона, и расширение будет разрешать и рендерить шаблон стандартным образом для этого шаблонизатора:

mustache - ищет тег <script> mustache по ID для содержимого шаблона
handlebars - ищет тег <script> handlebars по ID для содержимого шаблона
nunjucks - разрешает шаблон по имени с помощью `nunjucks.render(<имя-шаблона>)
xslt - ищет тег <script> XSLT по ID для содержимого шаблона

Тело ответа AJAX будет парситься как JSON/XML и передаваться в процесс рендеринга шаблона.

Теперь предлагается вторая «массивная» версия каждого шаблона, что особенно полезно для API, возвращающих массивы данных. Эти шаблоны ссылаются как <template-engine>-array-template, а данные извлекаются как data.my_server_field. По крайней мере, в случае mustache, это также позволяет использовать циклы с использованием синтаксиса {{#data}} my_server_field {{/data}}.

Установка

<script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>

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

<div hx-ext="client-side-templates">
  <button hx-get="/some_json"
mustache-template="my-mustache-template">
     Handle with mustache
  </button>
  <button hx-get="/some_json"
handlebars-template="my-handlebars-template">
     Handle with handlebars
  </button>
  <button hx-get="/some_json"
nunjucks-template="my-nunjucks-template">
     Handle with nunjucks
  </button>
  <button hx-get="/some_xml" 
xslt-template="my-xslt-template">
     Handle with XSLT
  </button>
</div>

Полный пример HTML с Mustache

Для использования клиентского шаблона необходимо включить htmx, расширение и движок рендеринга. Вот пример такой настройки для Mustache, использующий тег <template>.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/htmx.org"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
  <script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="https://jsonplaceholder.typicode.com/todos/1"
hx-swap="innerHTML"
hx-target="#content"
mustache-template="foo">
      Click Me
    </button>
    <p id="content">Start</p>
    <template id="foo">
      <p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
    </template>
  </div>
</body>
</html>

Вот интерактивная среда jsbin jsbin, чтобы попробовать это.

Вот рабочий пример, использующий mustache-array-template для работы с API, возвращающим массив:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/htmx.org"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
  <script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="https://jsonplaceholder.typicode.com/users"
hx-swap="innerHTML"
hx-target="#content"
mustache-array-template="foo">
      Click Me
    </button>
    <p id="content">Start</p>
    <template id="foo">
      {{#data}}
      <p> {{name}} at {{email}} is with {{company.name}}</p>
      {{/data}}
    </template>
  </div>
</body>
</html>

Полный пример HTML с XSLT

Для использования клиентского шаблона необходимо включить htmx и расширение. Вот пример такой настройки для XSLT, использующий тег <script>.

Если вы хотите поместить шаблон в другой файл, вы можете использовать директиву, такую как <object id="template-id" data="my-template.xml" style="position: absolute; bottom: 0px; width: 0px; height: 0px;">. Необходимо некоторое стилирование, чтобы объект оставался видимым, но не занимал места.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/htmx.org"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="http://restapi.adequateshop.com/api/Traveler"
hx-swap="innerHTML"
hx-target="#content"
xslt-template="foo">
      Click Me
   </button>
    <p id="content">Start</p>
    <script id="foo" type="application/xml">
      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:template match="/">
          page <xsl:value-of select="/TravelerinformationResponse/page" /> of <xsl:value-of select="/TravelerinformationResponse/total_pages" />
        </xsl:template>
      </xsl:stylesheet>
    </script>
  </div>
</body>
</html>

CORS и REST/JSON

Как предупреждение, многие веб-сервисы используют защиту CORS и/или другие схемы защиты, чтобы отклонить запрос REST/JSON из веб-браузера – например, GitHub выдает ошибку CORS, если вы попытаетесь использовать приведенный выше фрагмент для доступа к общедоступным API. Это может быть раздражающим, так как специальный клиент REST может работать нормально, но ошибка CORS появится при выполнении JavaScript. Это не имеет прямого отношения к HTMX (так как у вас будут те же проблемы с любым JavaScript-кодом), но может быть неожиданным источником раздражения.

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