使用knockoutjs将css类名绑定到viewmodel

Question

我正在做这个css绑定:

css: { greenBorder: hasGreenBorder, whiteBorder: hasWhiteBorder, blackBorder: hasBlackBorder }

这有效,但为什么我的viewmodel不仅返回像.whiteBorder或.blackBorder这样的css类名.

因为我的逻辑是所有3个变量中的变量只有一个真实,其他变量总是假的.

我认为必须有一个更好的方法来应用类名并将此逻辑放在我的viewmodel中选择哪个类名,对吧？

Answer 1

您可以使用attr绑定.

data-bind="attr: { class: yourClass }"

Answer 2

正确的方法

类绑定就是您正在寻找的。

此绑定允许您为元素设置任意 css 类。它需要 jQuery。

用法 ：

<div data-bind="class: single">Single Observable Class</div>
<div data-bind="class: multiple">Multiple Observable Classes</div>



var vm = {
    single: ko.observable("red"),
    multiple: ko.observableArray(["blue","small"])
};
vm.change = function () {
    vm.single(vm.single() === "red" ? "black" : "red");

    if (vm.multiple.indexOf("small") > -1) {
        vm.multiple.remove("small");
        vm.multiple.push("big");
    } else {
        vm.multiple.remove("big");
        vm.multiple.push("small");
    }    
};

我希望它有帮助