How do I conditionally add a class to a block item inside a repeat loop with Chameleon

Question

I am just getting started with pyramid and chameleon templates.

I have the following code example that renders a site menu.

<li tal:repeat="menu view.site_menu">
    <tal:block tal:condition="menu.current">
        <span>${menu.title}</span>
    </tal:block>
    <tal:block tal:condition="not menu.current">
        <span><a href="/${menu.href}">${menu.title}</a></span>
    </tal:block>
</li>

It highlights the current page menu item by not making it a link. I am trying to use bootstrap pill navigation. I need to conditionally add the class="active" to the <li> tag of the active page.

I tried adding a tal:condition to the <li> tag:

 <li tal:repeat="menu view.site_menu" tal:condition="menu.current" class="active">
    <a href="/${menu.href}">${menu.title}</a>
 </li>

but I get the following error:

builtins.NameError
NameError: menu

 - Expression: "menu.current"
 - Filename:   H:\eta\eta\eta\templates\global_layout.pt
 - Location:   (line 38: col 57)
 - Source:     ... .site_menu" tal:condition="menu.current" class="active">
                                              ^^^^^^^^^^^^

My best guess here is that menu is only available inside the tal:repeat tags.

What is the best way to accomplish what I need.

Answer 1

The condition is executed before the repeat; you'd normally nest the statements to put the condition on a tag contained in the repeat. However, to put a conditional attribute, use tal:attributes instead:

<li tal:repeat="menu view.site_menu" tal:attributes="class 'active' if menu.current else None">
    <a href="/${menu.href}">${menu.title}</a>
</li>

Setting an attribute to None removes it from the tag.