Knockout中的CSS绑定，用于绑定两个类，其中一个是动态的，另一个是静态的并经过评估的

CSS binding in Knockout to bind two classes where one is dynamic and the other static and evaluated

本文关键字：绑定 动态 评估 经过 另一个 一个 静态 用于 CSS 中的 两个      更新时间：2023-09-26

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

<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"）都是绑定的，而不是其值（"蓝色"）。我不想使用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"answers"staticClass"被视为css样式名称，我们将得到类似的名称

<div class="dynamicClass staticClass">

在生成的标记中。

2） 我们传递一个observable（返回一个字符串）作为"css"绑定参数：

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

这意味着"dynamicClass"类似于：

dynamicClass = ko.observable("styleName1 styleName2")

我们会得到类似的东西

<div class="styleName1 styleName2">

在生成的标记中。

attr和css必须组合。试试这个：

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

如果您有其他静态类，并且不想用attr绑定来擦除它，只需复制绑定处理程序css即可：

<div data-bind="css2: dynamicClass, css: { staticClass: evaluator() === 5 }" class="test">
    Something
</div>
<script type="text/javascript">
     ko.bindingHandlers['css2'] = ko.bindingHandlers.css;
    
    var viewModel = {};
    viewModel.evaluator = ko.observable(5);
    viewModel.dynamicClass = ko.observable('blue');
    ko.applyBindings(viewModel);
    
    
</script>

相关文章：