剔除将CSS类绑定到观察到的模型属性 [英] Knockout binding css class to an observed model property

问题描述

我想像这样将divs css类绑定到视图模型的属性:

I want to bind a divs css class to a property of the view model like this:

<div id="statusIndicator" data-bind="css: selectedPriority">

但这会产生结果:

 <div id="statusIndicator" class=" 0 1 2 3">

这是视图模型:

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

因此，当我加载使用此视图模型的页面时，我希望div为

So when i load the page that uses this view model i want the div to be:

<div id="statusIndicator" class="High">

我在做什么错了?

推荐答案

在这种情况下，您可以执行以下操作:

For this situation you can do:

<div data-bind="attr: { 'class': selectedPriority}">

此方法的唯一缺点是，它将直接设置类，而不是打开或关闭类，因此，如果您使用多个类，则selectedPriority将需要包含类的完整列表.

The only downside to this method is that it will set the class directly rather than toggle a class on or off, so if you are using multiple classes, then selectedPriority would need to contain the complete list of classes.

这篇关于剔除将CSS类绑定到观察到的模型属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！