knockout.js - 优化我的锚链接的淘汰赛绑定

Question

我有以下淘汰赛代码：

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

如您所见，这是完全相同的锚点，只是“类”不同。

我想知道是否可以简化我的代码以避免重复这个锚点？是否可以有一个锚并在里面设置条件？

谢谢你的帮助。

Answer 1

使用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/

当然，第二条路线的缺点是在解析绑定时将删除任何其他类。我会坚持第一种方法。