Question

我正在尝试在一个元素上设置多个css类。

不幸的是，这不起作用，因为它返回：LanguageError: Duplicate attribute name in attributes.

<ul>
    <li tal:repeat="item mainnav"
        tal:attributes="class 'first' if repeat.item.start else nothing; 
                        class 'last' if repeat.item.end else nothing;
                        class 'active' if item.active else nothing">
        <a tal:attributes="href item.href" tal:content="item.title">title</a>
    </li>
</ul>

将这3个案例合并为一个表达式会使其变得非常复杂，因为有6种不同的 css状态：

first + active
第一
last + active
最后
活性
（无）

我可以想到两种可能的解决方案：

- ＆GT;检查内联的每个组合：

<ul>
    <li tal:repeat="item mainnav" 
        tal:attributes="
            class 'first active' if (repeat.item.start and item.active) else
                  'first'        if repeat.item.start else
                  'last active'  if (repeat.item.end and item.active) else
                  'last'         if repeat.item.end else
                  'active'       if item.active else nothing">
        <a tal:attributes="href item.href" tal:content="item.title">title</a>
    </li>
</ul>

- ＆GT;创建一个返回组合css类的方法

现在，是否有更好的方法，如果没有，那两个中的哪一个更好（可能是后一个，好像它变得更复杂的内联脚本将变得不可读/无法管理）。

顺便说一句，关于Chameleon，TALES（http://chameleon.repoze.org/docs/latest除外）是否有任何好的资源和示例

Answer 1

您可以多次使用tal:define来定义类字符串的各个部分，然后从这些部分构造实际属性：

<tal:loop repeat="item mainnav">
    <li tal:define="class_first  'first'  if repeat.item.start else '';
                    class_last   'last'   if repeat.item.end else '';
                    class_active 'active' if item.active else '';"
        tal:attributes="class string:$class_first $class_last $class_active">
       <a tal:attributes="href item.href" tal:content="item.title">title</a>
    </li>
</tal>

这可能会导致一个空类属性，这是无害的。

至于其他文件; Chameleon是TAL的一个实现，最初是为Zope页面模板开发的。因此，你会发现后者的很多文档也适用于变色龙，只要你考虑到Chameleon的默认TALES模式是python:，而ZPT默认为path:。例如，Zope Book的Advanced Page Templates chapter也适用于Chameleon。

Answer 2

在Chameleon你可以做到：

<ul>
    <li tal:repeat="item mainnav"
        class="${'first' if repeat.item.start else ''}
               ${'last' if repeat.item.end else ''}
               ${'active' if item.active else ''">
        <a tal:attributes="href item.href" tal:content="item.title">title</a>
    </li>
</ul>

[编辑] 或者更好的是这样：

<ul>
    <li tal:repeat="item mainnav"
        class="${('first ' if repeat.item.start else '') +
                 ('last ' if repeat.item.end else '') +
                 ('active' if item.active else '')}">
        <a tal:attributes="href item.href" tal:content="item.title">title</a>
    </li>
</ul>

Answer 3

你没有使用tal：condition，它有一个目的。我不喜欢过于嵌套的条件，让你无处可去。没有测试过这个，但你可能会有这个想法。

<ul>
    <tal:myloop tal:repeat="item mainnav">
        <li tal:condition="item.active" tal:attributes="class 
            'active first' if repeat.item.start 
            else 'active last' if repeat.item.end 
            else 'active'">
            <a tal:attribute="href item.href" tal:content="item.title"></a>
        </li>
        <li tal:condition="not item.active" tal:attributes="class 
            'first' if repeat.item.start 
            else 'last' if repeat.item.end else None">
            <a tal:attribute="href item.href" tal:content="item.title"></a>
        </li>
    </tal:myloop>
</ul>

如何使用TALES为tal：attributes中的同一属性设置多个值

3 个答案: