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

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

<div data-bind="css: profitStatus">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000)
    };

    // Evalutes to a positive value, so initially we apply the "profitPositive" class
    viewModel.profitStatus = ko.computed(function() {
        return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
    }, viewModel);

    // Causes the "profitPositive" class to be removed and "profitWarning" class to be added
    viewModel.currentProfit(-50);
</script>

Answer 3

正确的方法

class binding正是您要找的。

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

我希望它有所帮助

Answer 4

你可以使用attr绑定来设置类（正如@ david.s所建议的那样）但是当我有这种类型的逻辑时，我倾向于将它放在一个自定义{ {1}}。

我会让viewModel公开一些状态信息，这些信息将决定（在这种情况下）边框颜色但不直接绑定到类：

bindingHandler

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

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

这种方法意味着视图模型不直接引用css类（这对我来说感觉不对），并且<div data-bind="stateStyle: state"></div>的逻辑没有在视图中的内联绑定中定义。

使用knockoutjs将css类名绑定到viewmodel

4 个答案: