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;
    });

这无法生成“徽章警告”类。我在数据绑定属性中尝试了一些调用变体，例如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>

Knockout JS css“else”条件

2 个答案: