3

我正在尝试在一个元素上设置多个 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 状态：

  • 第一+主动
  • 第一的
  • 最后+活跃
  • 最后的
  • 积极的
  • （没有任何）

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

-> 检查每个组合内联：

<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>

-> 创建一个返回组合css类的方法

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

顺便说一句，有什么好的资源和例子Chameleon，TALES（除了http://chameleon.repoze.org/docs/latest）

4

3 回答 3

7

您可以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，只要您考虑到 Chameleon 的默认 TALES 模式是python:，而 ZPT 默认为path:。例如，Zope Book的高级页面模板章节也适用于 Chameleon。

于 2012-07-28T17:09:12.000 回答
4

在变色龙中，您可以：

<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>
于 2013-01-28T14:52:03.300 回答
0

你没有使用 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>
于 2012-05-04T00:39:14.317 回答