knockout.js - 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

当您在数据绑定(bind)属性中使用逻辑操作时，您应该输入 ()在可观察或计算名称之后。

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