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

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

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

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

1
2

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

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

1
2
3
4
5

# config/packages/framework.yaml
framework:
    # ...
    fragments:
        hinclude_default_template: hinclude.html.twig

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- config/packages/framework.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:framework="http://symfony.com/schema/dic/symfony"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        https://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/symfony https://symfony.com/schema/dic/symfony/symfony-1.0.xsd">

    <!-- ... -->
    <framework:config>
        <framework:fragments hinclude-default-template="hinclude.html.twig"/>
    </framework:config>
</container>

1
2
3
4
5
6
7
8
9

// config/packages/framework.php
use Symfony\Config\FrameworkConfig;

return static function (FrameworkConfig $framework) {
    // ...
    $framework->fragments()
        ->hincludeDefaultTemplate('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'}}) }}