Як вбудувати асинхронний зміст за допомогою hinclude.js

Дата оновлення перекладу 2022-11-24

Як вбудувати асинхронний зміст за допомогою hinclude.js

Вбудовування контролерів у шаблони - це один зі способів повотрно використовувати зміст у багатьох шаблонах. Щоб ще покращити продуктивність, ви можете використати бібліотеку JavaScript hinclude.js, щоб вбудувати контролери асинхронно.

Спочатку, додайте бібліотеку hinclude.js на вашу сторінку, пославшись на неї з шаблону, або додавши її до JavaScript вашого додатку, що використовує Webpack Encore.

Так як вбудований зміст походить з іншої сторінки (або контролера, якщо на це пішло), Symfony використовує версію стандартної функції render(), щоб сконфігурувати теги hinclude у шаблонах:

1
2
{{ render_hinclude(controller('...')) }}
{{ render_hinclude(url('...')) }}

Note

При використанні функції controller(), ви повинні також сконфігурувати опція шляху фрагментів .

Коли JavaScript відключено, або забирає велику кількість часу для завантаження, ви можете відобразити зміст за замовчуванням, відобразивши якийсь шаблон:

1
2
3
4
5
# config/packages/framework.yaml
framework:
    # ...
    fragments:
        hinclude_default_template: hinclude.html.twig

Ви можете визначити шаблони за замовчуванням у функції render() (що перевизначить будь-який визначений глобальний шаблон за замовчуванням):

1
2
3
{{ render_hinclude(controller('...'),  {
    default: 'default/content.html.twig'
}) }}

Або ви також можете вказати рядок, щоб відобразити як зміст за замовчуванням:

1
{{ render_hinclude(controller('...'), {default: 'Loading...'}) }}

Використайте опцію attributes, щоб визначити значення опцій hinclude.js:

1
2
3
4
5
6
7
{# за замовчуванням, міжсайтові запити не використовують атестати типу кукі, заголовків
   авторизації або сертифікати клієнта TLS; встановіть цю опцію як 'true', щоб використовувати їх #}
{{ render_hinclude(controller('...'), {attributes: {'data-with-credentials': 'true'}}) }}

{# за замовчуванням, код JavaScript включений у завантажений зміст, не виконується;
   встановіть цю опцію як 'true', щоб виконати цей код JavaScript #}
{{ render_hinclude(controller('...'), {attributes: {evaljs: 'true'}}) }}