CSS绑定

css绑定会对元素的CSS类进行操作。在某些情况下这将非常有用，例如：当数值是负的时将其高亮显示。

（注：如果如果不想直接更改CSS类，而是只要改其中一个样式，则需要使用style绑定）

示例：使用静态的CSS类

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
    };
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

当currentProfit的值小于0时就会将profitWarning的类绑定上，当大于0时就会移除这个类。

示例：使用动态的类

<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.pureComputed(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>

当currentProfit小于0时就会将profitWarning类赋上，否则将会使用profitPositive类。

参数

　　　　如果使用静态的CSS类名，这时可以传递一个JavaScript对象，它的名称就是CSS的类名，它的值(true, false)用来判断使用哪一个类。

也可以一次设置多个CSS类。例如，如果view model有一个isServer的属性，

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

也可以用引号括起来多个类名，使用同一个条件设置CSS类：

<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">

非bool的值会转换为造价的bool值，如，0和null是false, 21、非null是true.

如果绑定的参数是一个observable的值，那么当值改变时，CSS类也会更改。反之，只会在初始化时绑定一次。

如果要使用动态的CSS类，可以传递CSS类名的字符串。如果参数指向一个observable的值，绑定会将原来的添加的类移除然后按observable的值重新绑定。

我们可以使用任意的JavaScript表达式或者函数来绑定CSS类。

注：绑定类名不是合法的JavaScript变量的CSS类

可以这样写：

<div data-bind="css: { 'my-class': someValue }">...</div>

使用引号把类名括起来就可以了。