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

Question

我想我已经尝试了一切。绑定(bind)动态类似乎是这样的:

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

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

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

    ko.applyBindings(viewModel);
</script>

当我还尝试在同一元素上绑定(bind)静态评估类时，

不起作用。就像这样:

<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”或“dynamicClassCompulated”)都是绑定(bind)的，而不是其值(“blue”)。我不想使用 attr绑定(bind)，因为它替换了元素上的所有类。

我正在寻找的东西在 knockout 中是否可能实现？

Answer 1

如果我们研究一下 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”绑定(bind)使用情况:

1) 我们将一个对象作为 'css' 绑定(bind)参数传递('if (value !== null && typeof value == "object")'):

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

在这种情况下，“dynamicClass”和“staticClass”被视为 css 样式名称，我们会得到类似的内容

<div class="dynamicClass staticClass">

在生成的标记中。

2)我们传递一个可观察的(返回一个字符串)作为“css”绑定(bind)参数:

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

这意味着“dynamicClass”类似于:

dynamicClass = ko.observable("styleName1 styleName2")

我们会得到类似的东西

<div class="styleName1 styleName2">

在生成的标记中。