Question

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

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

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

我在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'绑定用法的正交情况：

1）我们将一个对象作为'css'绑定参数传递（'if（value！== null＆amp;＆amp; typeof value ==“object”）'）：

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

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

的内容

<div class="dynamicClass staticClass">

在结果标记中。

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

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

这意味着'dynamicClass'类似于：

dynamicClass = ko.observable("styleName1 styleName2")

我们会得到像

这样的东西

<div class="styleName1 styleName2">

在结果标记中。

Answer 2

必须合并

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>

Knockout中的CSS绑定绑定两个类，其中一个是动态的，另一个是静态的并且已经计算

2 个答案: