css: <binding-object>
此绑定允许您根据特定条件为HTML DOM元素定义CSS类。 如果您需要根据情况突出显示某些数据，这非常有用。
语法 (Syntax)
css: <binding-object>
参数 (Parameters)
在静态CSS绑定的情况下，参数可以是JavaScript对象的形式，由属性及其值组成。
这里的Property是指要应用的CSS类， value可以是布尔值true或false，或JavaScript表达式或函数。
也可以使用Computed Observable函数动态应用Classes 。
也可以同时应用多个CSS类。 以下是如何将2个类添加到绑定的示例。
<div data-bind = "css: {
outOfStock : productStock() === 0,
discountAvailable: discount
}">
类名也可以用单引号指定，例如'discount Available'。
0和null被视为false值。 数字和其他对象被视为真实值。
如果ViewModel属性是可观察的，则根据新更新的参数值确定CSS类。 如果它不是可观察的值，那么第一次只确定一次类。
例子 (Example)
让我们看一下下面的例子，它演示了CSS绑定的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS CSS binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
<style>
.outOfStock {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div data-bind = "css: { outOfStock : productStock() === 0 }">
Product Details.
</div>
<script>
function AppViewModel() {
this.productStock = ko.observable(0);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在css-bind.htm文件中。
在浏览器中打开此HTML文件。
当productStockproperty高于0时，产品信息以正常方式显示。产品信息变为红色和粗体。 一旦productStock成为0。
