Twig equality if..else in symfony 2 gives both results

Question

I'm using Symfony2 with Twig and when trying to determine the class that should be a div Twig says that all 4 classes are active even beeing in an if..else clause. Redirect has only 1 value. I checked the syntax and I think it's correct so maybe I'm missing something.

It's correct my code or is something wrong in the Twig comparision (equality or if..else clause)?

Here is the Twig code:

{% if redirect == 'a' %}
    {% block classA 'active' %}
{% elseif redirect == 'b' %}
    {% block classB 'active' %}
{% elseif redirect == 'c' %}
    {% block classC 'active' %}
{% else %}
    {% block classD 'active' %}
{% endif %}

And the controller code:

[...]
$redirect = "a";

return $this->render('FrontendBundle:Default:delete.html.twig', array(
    'id' => $id,
    'redirect' => $redirect,
    'text' => $text)
);

Edited.

Solution

I found that it's not possible to use if clauses out of a block, so the solution goes ahead using one block for each class.

I've also thought that a better solution would be to use a dynamic name block, but i read that's not possible.

Finally I found this that solve my problem in a different way: http://peter-hoffmann.com/2012/highlight-active-menu-item-with-twig-and-silex.html

Kind regards.

Answer 1

Even though this question is old, I want to clarify a few things, since there is no real answer provided.

The underlying problem here is that block is evaluated during compile time, while if is evaluated during run-time. This means that blocks are always defined, one cannot define blocks conditionally. That is also the reason why blocks cannot have dynamic names.

With the template from the question, this is not a problem:

classes.html.twig:

{% if redirect == 'a' %}
    {% block classA %}active{% endblock %}
{% elseif redirect == 'b' %}
    {% block classB %}active{% endblock %}
{% elseif redirect == 'c' %}
    {% block classC %}active{% endblock %}
{% else %}
    {% block classD %}active{% endblock %}
{% endif %}

If we render this, we get 'active', i.e. the expected output. While each block is defined, only one of them is rendered, because of the if. The problem is only revealed if we have inheritance. So let's say we have the following parent template (I assume something like that was used by the poster):

parent.html.twig:

{% block classA %}{% endblock %}
{% block classB %}{% endblock %}
{% block classC %}{% endblock %}
{% block classD %}{% endblock %}

And change our extending template to extend this (also added classE for demonstration purposes):

classes.html.twig:

{% extends "parent.html.twig" %}

{% if redirect == 'a' %}
    {% block classA %}active{% endblock %}
{% elseif redirect == 'b' %}
    {% block classB %}active{% endblock %}
{% elseif redirect == 'c' %}
    {% block classC %}active{% endblock %}
{% else %}
    {% block classD %}active{% endblock %}
{% endif %}

{% block classE %}undefined{% endblock %}

Now, if we render classes.html.twig, we get 'activeactiveactiveactive'. As before, the blocks are all defined with 'active', but the parent template has no conditional rendering, so all of them are shown. Block 'classE' is not rendered, because it is not defined in the parent template.

To fix this, one needs to essentially swap the if and block statements.

{% extends "parent.html.twig" %}

{% block classA %}
    {% if redirect == 'a' %}
        active
    {% endif %}
{% endblock %}
{% block classB %}
    {% if redirect != 'a' and redirect == 'b' %}
        active
    {% endif %}
{% endblock %}
{% block classC %}
    {% if redirect != 'a' and redirect != 'b' and redirect == 'c' %}
        active
    {% endif %}
{% endblock %}
{% block classD %}
    {% if redirect != 'a' and redirect != 'b' and redirect != 'c' %}
        active
    {% endif %}
{% endblock %}

Sadly, we lose the if/else structure when we do this, so we have to write more conditions. To fix this, we can add an intermediate step using a variable.

{% extends "classes.html.twig" %}

{% if redirect == 'a' %}
    {% set render = 'a' %}
{% elseif redirect == 'b' %}
    {% set render = 'b' %}
{% elseif redirect == 'c' %}
    {% set render = 'c' %}
{% else %}
    {% set render = 'd' %}
{% endif %}

{% block classA %}
    {% if render == 'a' %}
        active
    {% endif %}
{% endblock %}
{% block classB %}
    {% if render == 'b' %}
        active
    {% endif %}
{% endblock %}
{% block classC %}
    {% if render == 'c' %}
        active
    {% endif %}
{% endblock %}
{% block classD %}
    {% if render == 'd' %}
        active
    {% endif %}
{% endblock %}

Answer 2

I'm not sure if you're taking the most efficient approach for this kind of behavior, but regardless, shouldn't your blocks be defined like this?

{% block classA %}active{% endblock %}