Knockout.js 使用knockoutjs将css类名绑定到viewmodel

我正在进行css绑定：

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

这是可行的，但是为什么我的viewmodel不应该只返回css类名，比如.whiteBorder或.BlackOrder

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

我认为一定有更好的方法来应用类名，并在我的viewmodel中选择哪个类名，对吗？

您可以使用绑定

---

是的，您可以使用可观察或计算变量作为类名，请查看以下示例代码：

利润信息
var viewModel={
当前利润：可观察到的ko（150000）
};
//求值为正值，因此最初我们应用“profitPositive”类
viewModel.profitStatus=ko.computed（函数（）{
返回此.currentProfit（）<0？“profitWarning”：“profitPositive”；
}，视图模型）；
//导致删除“profitPositive”类并添加“profitWarning”类
viewModel.currentProfit（-50）；

您可以使用

attr

绑定来设置类（如@david.s所建议的），但是当我有这种类型的逻辑时，我倾向于将它放在自定义的

绑定处理程序中

我将使viewModel公开一些状态信息，这些信息将确定（在本例中）边框颜色，但不会直接绑定到类：

this.state = ko.observable("complete"); //complete, pending, or cancelled (for example)

然后，我将使用绑定处理程序将其映射到类上

ko.bindingHandlers.stateStyle = {
    update: function(element, valueAccessor) {
        var state = ko.utils.unwrapObservable(valueAccessor());

        if (state === "completed") {
            $(element).addClass("hasGreenBorder"); //again, just an example
        }
        else if (state === "pending") {
            //etc
        }
    }
}

然后我将在元素上使用新绑定

<div data-bind="stateStyle: state"></div>



这种方法意味着视图模型没有直接引用css类（我觉得这是错误的），并且
state1=>green border
的逻辑没有在视图中的内联绑定中定义

这就是你要找的

此绑定允许您为元素设置任意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");
    }    
};

单个可观察类
多个可观测类
var vm={
单个：可观测（“红色”），
多重：ko.observearray（[“蓝色”，“小”]）
};
vm.change=函数（）{
vm.single（vm.single（）==“红色”？“黑色”：“红色”）；
if（vm.multiple.indexOf（“small”）>-1）{
vm.multiple.remove（“小”）；
vm.multiple.push（“大”）；
}否则{
vm.multiple.remove（“大”）；
vm.multiple.push（“小”）；
}    
};

我希望这会有所帮助
在淘汰赛2.2.0中，我可以将类绑定为属性，这是新的吗？正确的方法吗？关于：data bind=“attr:{class:yourClass}”的错误是什么？这很容易出错，因为attr:{class:yourClass}删除class属性的先前内容。因此，当您编写本文时：deletedClass类将消失。一般来说，这是可以的，但我没有描述该场景；-）视图模型保存视图的模型，这是颜色等。。。为什么viewmodel知道黑色或.BlackOrder等边框颜色是错误的？在自定义绑定中使用类名没有任何好处。viewmodel是一个转换器（josh smith），你所做的就是转换。我不需要装订。
<div data-bind="stateStyle: state"></div>

<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");
    }    
};