Як вбудувати асинхронний зміст за допомогою 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'}}) }}