如何使用Knockout为data-bind添加多个CSS类？

问题出在你对case-header类的绑定逻辑上：当useColorHeaderCaseHistory()为true时，caseHeader1会返回false，这会让Knockout移除case-header类，违背了“所有场景保留该类”的要求。

解决方案 #

直接把case-header作为静态类写在<div>的class属性里，仅用Knockout的css绑定动态控制case-type-1和case-type-2这两个按需添加的类：

<div class="case-header" data-bind="css: {'case-type-1': model.caseHeader2, 'case-type-2': model.caseHeader3}">

为什么这样有效 #

1. 静态class="case-header"不受Knockout绑定影响，确保任何场景下该类都存在
2. css绑定仅处理动态类：
   • 当caseHeader2为true时，自动添加case-type-1类
   • 当caseHeader3为true时，自动添加case-type-2类
   • 条件不满足时，Knockout会自动移除对应的类

验证你的TypeScript逻辑 #

你的计算属性逻辑是正确的，现在caseHeader1已经不需要在绑定中使用了：

self.model.caseHeader1 = ko.computed(function () {
    return !self.model.useColorHeaderCaseHistory();
});

self.model.caseHeader2 = ko.computed(function () {
    return self.model.isRatingCase() && self.model.useColorHeaderCaseHistory();
});

self.model.caseHeader3 = ko.computed(function () {
    return self.model.isQiCase() && self.model.useColorHeaderCaseHistory();
});

内容的提问来源于stack exchange，提问作者Corey Sutton