Symfony3在模板中嵌入控制器

时间:2017-10-22 18:23:21

标签: symfony twig sidebar extends

我有一个sidebar.html.twig模板,它在每个页面都会重现,因此在我的base.html.twig根模板中。它包含逻辑,因为我的侧边栏的菜单是从一个在我的控制器中调用数据库的函数动态填充的。

我的问题是我的侧边栏模板必须扩展我的基本布局的内容块。这是我的代码:

我调用数据库的函数:

public function filterByBrandAction()
{
    $repository = $this->getDoctrine()->getRepository('ArticleBundle:Article');
    $brands = $repository->getBrand();

    return $this->render('sidebar.html.twig', [
        'brands' => $brands
    ]);
}

我的侧边栏模板:

<div class="uk-offcanvas-content">

    {% block content %}{% endblock %}

    <div id="offcanvas-push" uk-offcanvas="mode: push; overlay: true">
        <div class="uk-offcanvas-bar">
            <h2>LA FRIPERIE</h2>
            <button class="uk-offcanvas-close" type="button" uk-close></button>

            <ul class="uk-nav uk-nav-default uk-nav-parent-icon" uk-nav>
                <li class="uk-nav-header">Fripes</li>

                <li><a href="#">Toutes les fripes</a></li>

                <li class="uk-parent">
                    <a href="#">Fripes par marque</a>
                    <ul class="uk-nav-sub">
                        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">

                            {% for brand in brands %}
                                <label><input class="uk-checkbox" type="checkbox"> {{ brand.brand }}</label>
                            {% endfor %}
                        </div>
                    </ul>
                </li>

                <li class="uk-parent">
                    <a href="#">Fripes par catégories</a>
                    <ul class="uk-nav-sub">
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>

                <li class="uk-parent">
                    <a href="#">Fripes par prix</a>
                    <ul class="uk-nav-sub">
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>

                <li><a href="#">Fripes solidaires</a></li>
                <li class="uk-nav-divider"></li>
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Vendre ses fripes</a></li>
                <li><a href="#">Donner ses fripes</a></li>
            </ul>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat.</p>

        </div>
    </div>
</div>

我的基本模板:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}La Friperie{% endblock %}</title>
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        <link rel="stylesheet" href="{{ asset('build/global.css') }}">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css" />
    </head>
    <body>

        {% block navbar %}
            <nav class="uk-navbar-container uk-margin" uk-navbar uk-sticky="show-on-up: true; animation: uk-animation-slide-top; bottom: #bottom; media: 640;">
                <div class="uk-navbar-left">
                    <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-push">Menu</button>
                    <a class="uk-navbar-item uk-logo" href="#">LA FRIPERIE</a>
                </div>
                <div class="uk-navbar-right">
                    <div>
                        <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
                        <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
                            <form class="uk-search uk-search-navbar uk-width-1-1">
                                <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
                            </form>
                        </div>
                    </div>
                </div>
            </nav>
        {% endblock %}

        {% block sidebar %}
            {% block content %}{% endblock %}
            {{ render(controller('ArticleBundle:Article:filterByBrand')) }}
        {% endblock %}


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="{{ asset('build/app.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js"></script>
    </body>
</html>

我的侧边栏模板第3行的{% block content %}应该与我的基本模板的{% block content %}匹配,以便完美地完成所有工作。 但我不知道如何扩展我的基本模板的{% block content %},我的侧边栏模板中的简单{% extends base.html.twig %}不起作用。

如果您有任何想法,我会接受它:)

2 个答案:

答案 0 :(得分:0)

{% block content %}的内容会在侧栏上发生变化吗?

  1. 如果不是,您可以这样做:

            {% block content %}{% endblock %}
            {% block sidebar %}
                {{ render(controller('ArticleBundle:Article:filterByBrand')) }}
            {% endblock %}
    

    并将其从sidebar.html.twig中删除。

  2. 如果是,您必须分开两者的代码,因为孩子不能直接更改同一父母的其他孩子的值。试试:

    {{ include 'content....' }}{{ render(controller(content)) }}

  3. 主模板上的

    阻止侧边栏)。

答案 1 :(得分:0)

好的我找到了解决方案,我只是移动

`<div class="uk-offcanvas-content">

    {% block content %}{% endblock %}`
在base.html.twig模板中的

就像我不再需要在任何模板中包含内容块一样。