19

カスタムSymfony2フォームフィールドタイプ拡張でjavascriptを使用したい。だから、私はこのようなTwig拡張テンプレートを持っています：

{% block some_widget %}
    <input ... />

    <script src="some.js"></script>
    <link href="some.css" />
{% endblock %}

ただし、これらのスクリプトタグとリンクタグは、ベーステンプレートを変更せずに、HTMLで1回だけ、理想的にはヘッドタグで使用したいと考えています。Twigブロックを拡張しようとしましたが、フォームテンプレート内のアクションテンプレートブロックにアクセスできません。または多分このようなもの：

{# widget tempate #}
{% block some_widget %}
    <input ... />

    {{ use_javascript('some.js') }}
    {{ use_css('some.css') }}
{% endblock %}

{# main action template #}
...
<head>
{{ dump_javascripts() }}
{{ dump_css() }}
</head>
...

Symfony 2 Forms + Twigでこれを行う方法は？

PS私の悪い英語でごめんなさい。

4

5 に答える 5

1

最善の方法は、css とスクリプトをロードする別のテンプレートを提供することです。readme にコメントがあるので、開発者がしなければならないことは、

{% block stylesheets %}
  {{ parent() }}

  include "@MyBestBundle/Resources/view/styles.html.twig"

{% endblock %}

または、DI を使用してフォームのレンダリングをインターセプトし、アセットを追加してみてください。しかし、可能であれば実装するのはより困難です。

于 2012-07-03T11:51:19.710 に答える
1

私のやり方は、JS をバッファーに追加し、フォームのレンダリング中にカスタムの twig 拡張機能を作成し、後でレイアウトの にダンプすることでした。

このようなもの：

<?php

namespace AppBundle\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class WysiwygExtension extends AbstractExtension
{
    /**
     * @var array
     *
     * A pool of elements IDs for Wysiwyg binding.
     */
    private $wysiwygElements = [];

    /**
     * {@inheritdoc}
     */
    public function getFunctions()
    {
        return array(
            new TwigFunction('addWysiwygBinding', [$this, 'addWysiwygBinding']),
            new TwigFunction('popWysiwygBindings', [$this, 'popWysiwygBindings']),
        );
    }

    public function addWysiwygBinding(string $id): void
    {
        $this->wysiwyglements[] = $id;
    }

    public function popWysiwygBindings(): array
    {
        $elements = array_unique($this->wysiwygElements);

        $this->wysiwygElements = [];

        return $elements;
    }
}

次にform-fields.html.twig：

...
{% block wysiwyg_widget %}
{% apply spaceless %}
    {{ form_widget(form) }}
    {% do addWysiwygBinding(id) %}
{% endapply %}
{% endblock %}
...

次にlayout.html.twig：

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...

        {% set ids = popWysiwygBindings() %}

        {% if ids is not empty %}
            {% javascripts
                'bundles/admin/plugins/wysiwyg_1.js'
                'bundles/admin/plugins/wysiwyg_2.js'
            %}
                <script type="text/javascript" src="{{ asset_url }}"></script>
            {% endjavascripts %}
        {% endif %}

        {% for id in ids %}
            {{ include('_wysiwyg.html.twig', { id: id }) }}
        {% endfor %}
  </body>
</html>
于 2020-05-17T11:50:39.823 に答える
0

これが私の使い方です。それがあなたが探しているものであることを願っています。

base.html.twig

<head>
   {% block stylesheets %}
       css...
   {% endblock %}
</head>

foo.html.小枝

{% extends '::base.html.twig' %}

{% block stylesheets %}
   {{ parent() }}

   css that you need in foo.html.twig

{% endblock %}
于 2012-04-08T21:17:28.117 に答える