Tworzenie gotowych do użycia elementów współużytkowanych za pomocą twig

Pracuję nad projektem, który ma wiele elementów współużytkowanych, np. stopka, nagłówek, nawigacja itp. Mam kilka układów, które rozszerzam w moich widokach. Na razie ładuję elementy wspólne w widoku, ale muszę dostarczyć wszystkie zasoby (zależności) wymagane dla każdego elementu współużytkowanego w widoku, do którego go ładuję. Chciałbym móc pominąć ten krok i załadować element, który byłby gotowy do użycia od razu (więc nie musiałbym pamiętać wszystkich zależnych plików javascript i css, ponieważ niektóre z nich mogą mieć kilka) .Tworzenie gotowych do użycia elementów współużytkowanych za pomocą twig

Zastanawiam się nad określeniem wszystkich zasobów potrzebnych dla elementu współdzielonego w widoku elementu, więc gdy uwzględnię element, którego potrzebuję, załaduje on zasoby "automatycznie", bez podawania wszystkich w moim widoku. Tak więc moje pytanie brzmi: czy można to zrobić, czy też jest to właściwy sposób, aby to osiągnąć?

nadzieję, że będzie jeszcze lepiej wyjaśnione za pomocą kodu:

strukturę:

views/ 
- /layout/ 
    -> layout.twig 
- /homepage/ 
    -> index.twig 
- /shared/ 
    -> navigation.twig

układ:

<!-- HTML headers, etc. --> 
{% block assets %} 
    <link rel="stylesheet" href="xxx" /> 
{% endblock %} 

{% block content %} 

{% endblock %}

Widok:

{% extends "layout/layout.twig" %} 
{% block assets %} 
    {{ parent() }} 
    <!-- some assets for view -->  
{% endblock %} 
{% block content %} 
    {% include "shared/navigation.twig" %} 
    <!-- content --> 
{% endblock %}

udostępnionego elementu navigation.twig :

// It's not working, of course - just for better explanation of what I'm trying to approach 
{% block assets %} 
    {{ parent() }} 
    <!-- assets needed for shared element --> 
{% endblock %} 
<!-- rest of shared element -->

Chyba, normalnie, nie ładować wszystkich aktywów w widokach niektóre wspólne elementy mogą mieć wiele z nich, szczególnie w większym projekcie. Uważam też, że miło jest zauważyć, że naprawdę nie chcę renderować stylów dla nich wewnątrz <body>, więc utworzenie wewnątrz widoku <links> nie jest dla mnie dobrym pomysłem. Ma to działać jak element współdzielony, z którego możesz kontrolować, gdzie zostaną załadowane zasoby i jakie zasoby zostaną załadowane, nawet nie wiedząc, jakie zasoby są wymagane dla każdego elementu współużytkowanego. Z góry dziękuję.

Źródło

2017-11-22 Dawid Zbiński

Witam, czy próbowałeś używać bloków stylów i javascripts osobno? –

Nie jestem pewien, co przez to rozumiesz. Rozdzielam je, jeśli chodzi o element współdzielony, skrypty są najczęściej na końcu widoku tego elementu współdzielonego (co jest w porządku, ale wolę je mieć na końcu ciała), a arkusze stylów są ładowane z widoku samo w sobie (co jest dla mnie problemem, ponieważ chcę je zapisać w ich widoku i załadować je do wnętrza głowy). –

Najlepsza praktyka jest wyjaśniona w dokumentacji symfony: https://symfony.com/doc /3.4/templating.html#including-stylesheets-and-javascripts-in-twig –

Z documentation on use:

poziome ponowne ... jest wykorzystywany głównie przez projekty, które wymagają, aby bloki szablon wielokrotnego użytku bez użycia dziedziczenia.

use zawiera zewnętrzny plik do bieżącego pliku, z możliwością zmiany nazwy bloków na lokalnie unikatowe wartości. Te lokalnie unikalne wartości mogą następnie zostać wstrzyknięte - przy użyciu block - do hierarchii dziedziczenia.

Przykład. Start z bazy "rodzic":

<head> 
    {% block assets %} 
    <link rel='stylesheet' href='layout.css' /> 
    {% endblock %} 
</head> 
<body> 
    <div id='layout' class='content'> 
    {% block content %} 
    {% endblock %} 
    </div> 
</body>

Definiowanie menu, "składnik" będziemy "ponownego wykorzystania" później:

{% block assets %} 
    <link rel='stylesheet' href='menu.css' /> 
{% endblock %} 
{% block content %} 
    <div id='menu' class='content'></div> 
{% endblock %}

Teraz przynieść te dwa razem.Zauważ, jak jesteśmy extends -ing bazy, ale potem use -ing komponentu i ponownym jego bloki z block:

{% extends "layout.twig" %} 

{% use "menu.twig" with assets as menu_assets, content as menu_content %} 

{% block assets %} 
    {{ parent() }} 
    <link rel='stylesheet' href='view.css' /> 
    {{ block('menu_assets') }} 
{% endblock %} 

{% block content %} 
    <div class='menu'> 
    {{ block('menu_content') }} 
    </div> 
    <div id='view' class='content'></div> 
{% endblock %}

Plony:

<head> 
    <link rel='stylesheet' href='layout.css' /> 
    <link rel='stylesheet' href='view.css' /> 
    <link rel='stylesheet' href='menu.css' /> 
</head> 
<body> 
    <div id='layout' class='content'> 
    <div class='menu'> 
     <div id='menu' class='content'> 
     </div> 
    </div> 
    <div id='view' class='content'></div> 
    </div> 
</body>

To nie całkiem magia „zdefiniować bloki z to samo imię i wszystkie się łączą ", ale jest całkiem blisko. Twój układ nie ma informacji o menu, a menu nie ma informacji o układzie: ale obie strony zgadzają się na bloki o nazwach "zasoby" i "treść". Widok następnie łączy je ze sobą w prawidłową formę dziedziczenia.

Źródło

2017-11-29 19:33:47 bishop

Wspaniały, dziękuję. Byłem prawdopodobnie ślepy podczas czytania dokumentów. –

Tworzenie gotowych do użycia elementów współużytkowanych za pomocą twig

Odpowiedz

Powiązane problemy