1

私は次のノックアウトコードを持っています：

<!-- ko if: isActive -->
<a data-bind="attr: { href: hash }, html: name" class="bg-color-blue fg-color-white"></a>
<!-- /ko -->

<!-- ko ifnot: isActive -->
<a data-bind="attr: { href: hash }, html: name" class="bg-color-grayLight"></a>
<!-- /ko -->

ご覧のとおり、これは「クラス」が異なることを除いて、まったく同じアンカーです。

このアンカーの重複を避けるためにコードを単純化することは可能でしょうか？単一のアンカーを持ち、内部に条件を設定することは可能ですか？

ご協力いただきありがとうございます。

4

1 に答える 1

3

cssバインディングを使用します：

<a data-bind="attr: { href: hash }, 
              html: name, 
              css: { 'bg-color-grayLight': !isActive(), 
                     'bg-color-blue fg-color-white': isActive() }">
</a>

例： http： //jsfiddle.net/CCNtR/16/

または、バインディングで条件ステートメントを使用してattr、クラス属性全体を設定することもできます。

<a data-bind="attr: { href: hash, 'class': isActive() ? 
                  'bg-color-blue fg-color-white' : 'bg-color-grayLight' }, 
              html: name">
</a>

例： http： //jsfiddle.net/CCNtR/17/

もちろん、2番目のルートの欠点は、バインディングが解析されるときに他のクラスが削除されることです。私は最初の方法に固執します。

于 2013-03-25T17:23:34.730 に答える