Knockout JS css"else"条件

Question

我想在Knockout中这样做.

    <span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
        'badge-warning': !firstPlace}"></span>

我的javascript模型类有这个方法

    self.firstPlace = ko.computed(function() {
        return self.rank() == 1;
    });

这无法生成"徽章警告"类.我在data-bind属性中尝试了一些调用变体,例如firstPlace == false和(!firstPlace).相反,我必须在我的模型中添加第二个反向方法:

    <span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
        'badge-warning': notFirstPlace}"></span>


    // YUCK
    self.notFirstPlace = ko.computed(function() {
        return self.rank() != 1;
    });

当然,这是有效的.对于Knockout JS来说真的很有趣,这真的很有趣.但这似乎是错的.有谁有更好的方法？

Answer 1

在data-bind属性中使用逻辑运算时,应该放在()可观察或计算名称之后.

<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
    'badge-warning': !firstPlace()}"></span>

Answer 2

如果你要评估firstPlace()只有一次，你可以写css为内联函数结合：

<span class="badge" data-bind="text: rank, css: (firstPlace() ? 'badge-success' : 'badge-warning')"></span>