KnockoutJS - CSS 绑定
此绑定允许您根据特定条件为 HTML DOM 元素定义 CSS 类。如果您需要根据情况突出显示某些数据，这将非常有用。
语法
css: <binding-object>
参数
在静态 CSS 绑定的情况下，参数可以采用 JavaScript 对象的形式，由属性及其值组成。
属性此处指的是要应用的 CSS 类，值可以是布尔值 true 或 false，也可以是 JavaScript 表达式或函数。
类也可以使用 Computed Observable 函数动态应用。
也可以一次应用多个 CSS 类。以下是如何将 2 个类添加到绑定的示例。
<div data-bind = "css: {
outOfStock : productStock() === 0,
discountAvailable: discount
}">
类名也可以用单引号指定，例如"discount Available"。
0 和 null 被视为 false 值。数字和其他对象被视为 true 值。
如果 ViewModel 属性是可观察的，则根据新更新的参数值决定 CSS 类。如果它不是可观察的值，则第一次仅确定一次类。
示例
让我们看看下面的示例，它演示了 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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 css-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
当 productStock 属性大于 0 时，产品信息以正常方式显示。一旦 productStock 变为 0，产品信息将变为红色和粗体。
knockoutjs_declarative_bindings.html
