Javascript 在Knockout中绑定CSS绑定两个类，其中一个是动态的，另一个是静态的

我想我什么都试过了。似乎绑定动态类是这样的：

<div data-bind="css: dynamicClass">
    Something
</div>

<script type="text/javascript">
    var viewModel = {};

    viewModel.dynamicClass = ko.observable('blue');

    ko.applyBindings(viewModel);
</script>

某物
var viewModel={}；
viewModel.dynamicClass=ko.observable（'blue'）；
应用绑定（视图模型）；

当我尝试在同一个元素上绑定一个静态计算类时，它不起作用。像这样：

<div data-bind="css: { dynamicClass: true, staticClass: evaluator() === 5 }">
    Something
</div>

<script type="text/javascript">
    var viewModel = {};

    viewModel.evaluator = ko.observable(5);
    viewModel.dynamicClass = ko.observable('blue');

    ko.applyBindings(viewModel);
</script>

某物
var viewModel={}；
viewModel.evaluator=ko.可观察（5）；
viewModel.dynamicClass=ko.observable（'blue'）；
应用绑定（视图模型）；

我试过很多不同的版本：

<div data-bind="css: { dynamicClass: (true == true), staticClass: evaluator() === 5 }">

---

---

某物
var viewModel={}；
viewModel.evaluator=ko.可观察（5）；
viewModel.dynamicClass=ko.observable（'blue'）；
viewModel.dynamicClassComputed=ko.pureComputed（函数（）{
返回这个.dynamicClass（）；
}，视图模型）；
应用绑定（视图模型）；

在所有情况下，属性的名称（“dynamicClass”或“dynamicClassComputed”）都是绑定的，而不是其值（“blue”）。我不想使用

attr

绑定，因为它会替换元素上的所有类

---

我正在寻找的是在淘汰赛中可能出现还是还没有出现？

attr

和

css

必须结合使用。试试这个：

某物

如果我们研究一下KnockoutJS的内部结构，我们将看到：

ko.bindingHandlers['css'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value !== null && typeof value == "object") {
            ko.utils.objectForEach(value, function(className, shouldHaveClass) {
                shouldHaveClass = ko.utils.unwrapObservable(shouldHaveClass);
                ko.utils.toggleDomNodeCssClass(element, className, shouldHaveClass);
            });
        } else {
            value = ko.utils.stringTrim(String(value || '')); // Make sure we don't try to store or set a non-string value
            ko.utils.toggleDomNodeCssClass(element, element[classesWrittenByBindingKey], false);
            element[classesWrittenByBindingKey] = value;
            ko.utils.toggleDomNodeCssClass(element, value, true);
        }
    }
};

因此，我们有两种“css”绑定用法的正交情况：

1） 我们将对象作为“css”绑定参数传递（“if（value！==null&&typeof value==object”）：

我们会得到类似于

<div class="dynamicClass staticClass">

<div class="styleName1 styleName2">

---

在结果标记中。

@Jeroen是的，我想我不太擅长搜索StackOverflow。这不是一个解决方案，但它似乎是唯一的解决方案：）没关系。像你的问题这样写得好的副本对于堆栈溢出非常有用：其他人可能会用你在问题中使用的术语搜索这个问题，并且很容易找到重复的问题。我们中的一些回答爱好者可以写新的答案。谢谢你的解释。我已经意识到我不能做我想做的事，但你让我明白为什么这是不可能的。

<div data-bind="css: { dynamicClass: true, staticClass: evaluator() === 5 }">

<div class="dynamicClass staticClass">

<div data-bind="css: dynamicClass">

dynamicClass = ko.observable("styleName1 styleName2")

<div class="styleName1 styleName2">