3

1つの要素に複数の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つのケースを1つの式に組み合わせると、6つの異なるcss状態があるため、非常に複雑になります。

  • 最初の+アクティブ
  • 最初
  • 最後+アクティブ
  • 過去
  • アクティブ
  • （無し）

私が考えることができる2つの可能な解決策があります：

->各組み合わせをインラインで確認します。

<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クラスを返すメソッドを作成します

さて、より良いアプローチがありますか？そうでない場合は、これら2つのうちどちらが優れていますか（おそらく後者の方が、インラインスクリプトがより複雑になるかのように、読み取り不能/管理不能になります）。

ところで、についての良いリソースと例はありますかChameleon（http://chameleon.repoze.org/docs/latestTALES以外）

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 ページ テンプレート用に開発されました。python:そのため、Chameleon のデフォルトの TALES modus がであるのに対し、ZPT のデフォルトが であることを考慮に入れる限り、後者に関する多くのドキュメントが Chameleon にも適用されることがわかりますpath:。たとえば、Zope BookのAdvanced Page Templates の章は Chameleon にも適用されます。

于 2012-07-28T17:09:12.000 に答える
4

In Chameleon you can do:

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

[Edit] Or better like this:

<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 に答える