javascript - Knockout中的CSS绑定(bind)可绑定(bind)两个类，其中一个是动态的，另一个是静态的，并且经过评估

This question already has answers here:

combine dynamic and static classes through css binding, knockout.js
                                
                                    （9个答案）
                                
                        
                                3年前关闭。
            
                    
我想我已经尝试了一切。似乎绑定动态类是这样的：

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

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

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

    ko.applyBindings(viewModel);
</script>

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

<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>

我已经尝试过许多不同的版本：

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

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

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

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

    viewModel.evaluator = ko.observable(5);
    viewModel.dynamicClass = ko.observable('blue');
    viewModel.dynamicClassComputed = ko.pureComputed(function() {
        return this.dynamicClass();
    }, viewModel);

    ko.applyBindings(viewModel);
</script>

并且在所有情况下，属性的名称（“ dynamicClass”或“ dynamicClassComputed”）都是绑定的，而不是其值（“ blue”）。我不想使用attr绑定，因为它替换了元素上的所有类。

我正在寻找淘汰赛中可能的东西吗？

最佳答案

如果我们看一下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 data-bind="css: { dynamicClass: true, staticClass: evaluator() === 5 }">

在这种情况下，'dynamicClass'和'staticClass'被视为CSS样式名称，我们将得到类似

<div class="dynamicClass staticClass">

在结果标记中。

2）我们传递一个可观察的（返回一个字符串）作为“ css”绑定参数：

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

这意味着“ dynamicClass”类似于：

dynamicClass = ko.observable("styleName1 styleName2")

我们会得到类似

<div class="styleName1 styleName2">

在结果标记中。