7

我正在做这个css绑定：

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

这行得通，但为什么我的视图模型不仅要返回 .whiteBorder 或 .blackBorder 之类的 css 类名。

因为我的逻辑是，从所有 3 个 has-Variables 中只能有一个为真，其他的总是假的。

我认为必须有更好的方法来应用类名并将这个逻辑放在我的视图模型中选择哪个类名，对吧？

4

4 回答 4

7

您可以使用attr绑定。

data-bind="attr: { class: yourClass }"
于 2013-07-19T07:03:43.000 回答
1

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

<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>
于 2013-07-19T07:04:55.063 回答
1

正确的方法

类绑定是您正在寻找的。

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

我希望它有帮助

于 2013-07-19T07:15:43.490 回答
0

您可以使用attr绑定来设置类（如@david.s 建议的那样），但是当我有这种类型的逻辑时，我倾向于将它放在 custombindingHandler中。

我会让 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视图的内联绑定中没有定义逻辑。

于 2013-07-19T07:10:25.190 回答