如何在 knockout.js 中添加由 javascript 方法生成的 css 类？答案

【问题标题】：How can I add an css class generated by a javascript method in knockout.js?如何在 knockout.js 中添加由 javascript 方法生成的 css 类？
【发布时间】：2015-04-28 17:09:33
【问题描述】：

在我的 ViewModel 中，我有以下方法可以根据 pState 返回 css 类：

function MyViewModel()
{
    var self = this;

    self.GetClass = function(pState) 
    {
        var lCssClass;

        switch(pState)
        {
            case "warning": 
                lCssClass = 'bg-yellow';
                break;
            case "red":
                lCssClass = 'font-red';
                break;
            default:
                lCssClass = 'font-default';
                break;
        }

        return lCssClass;
    };
}

我想在我的视图中添加类：

<span class="list-item" data-bind="attr : { class : $root.GetClass('warning')}">This is a warning.</span>

我的问题：现有类 list-item 将被覆盖。

这是一个小提琴：http://jsfiddle.net/d8L6v9h7/

【问题讨论】：

标签： javascript knockout.js knockout-3.0

【解决方案1】：

css binding 将保留现有的类。使用它，例如像这样：

function MyViewModel()
{
    var self = this;
  
    self.GetClass = function(pState) 
    {
        var lCssClass;

        switch(pState)
        {
            case "warning": 
                lCssClass = 'bg-yellow';
                break;
            case "red":
                lCssClass = 'font-red';
                break;
            default:
                lCssClass = 'font-default';
                break;
        }

        return lCssClass;
    };
}

ko.applyBindings(new MyViewModel());

.list-item:before { content: ' ✓ '; } /* Just to prove it's preserved. */
.bg-yellow { background-color: yellow; }
.font-red { color: red; }
.font-default { }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span class="list-item" data-bind="css: $root.GetClass('warning')">This is a warning.</span>

这是对您问题的“直截了当”的回答。还请检查@Progrindis answer，甚至考虑在反转代码工作方式方面更进一步。

PS。如果您想要一个更“直截了当”的解决方案，例如当您创建一个快速模型并且不关心解决方案的整洁性时，您还可以诉诸：

<span data-bind="attr: { class: 'list-item ' + $root.GetClass('warning') }">

【讨论】：

至少使用计算的 observable 会不会更好？据我了解，每次都需要调用这个 GetClass 才能获得更新的值。. 违背可观察的目的？
是的，我同意可能需要解决一些代码异味（按照您建议的方式）。但是，OP 还没有完全发布足够的他/她的设置来进行代码审查 c.q.在不依靠猜测的情况下提出替代方案。这就是我直接回答问题的原因。
因此，我希望@Benoît 取消删除他的答案，以便我投票赞成 :)，这是一个更直接的答案，非常适合“只想让事情正常进行”的人（例如，在创建快速模型时，我认为这种方法是必要的）。

【解决方案2】：

你使用css绑定..

KnockoutJS CSS Binding

例如：

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
    };
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

您可以只添加类本身，也可以添加条件逻辑来决定何时应用它。

对于您的示例，您似乎可以将 lCssClass 作为可观察对象并将其应用于您的 html：

var self = this,
classObservable = ko.observable("");

switch(pState)
        {
            case "warning": 
                self.classObservable('bg-yellow');
                break;
            case "red":
                self.classObservable('font-red');
                break;
            default:
                self.classObservable('font-default');
                break;
        }

然后在你的 HTML 中：

<span class="list-item" data-bind="css: classObservable()">This is a warning.</span>

【讨论】：