淘汰赛JS css“其他”条件答案

【问题标题】：Knockout JS css "else" conditons淘汰赛JS css“其他”条件
【发布时间】：2016-12-30 02:57:43
【问题描述】：

我想在 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 万岁，使用起来真的很有趣。但这似乎是错误的。谁有更好的方法？

【问题讨论】：

标签： knockout.js

【解决方案1】：

当您在 data-bind 属性中使用逻辑操作时，您应该将 () 放在可观察或计算名称之后。

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

【讨论】：

接受！我为什么不尝试呢？有时我很难弄清楚何时使用括号，何时不使用。我通常最终使用试错法。我认为这是我第一次注意到同一数据绑定中的两个签名。
大多数绑定都被编写为允许任何一种语法......如果没有括号，它无论如何都会手动执行它。唯一不能添加括号的情况是绑定是“输出”，例如value: obs。

【解决方案2】：

如果您只想评估firstPlace()一次，您可以将css 绑定编写为内联函数：

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

【讨论】：