"css" 绑定

css绑定是添加或删除一个或多个CSS class到DOM元素上。非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）

例子

html代码

<div data-bind="css: { myClass: enableMyClass }">
  some text
</div>

js代码

var viewModel = {
   enableMyClass: ko.observable(false) //默认为false
};
viewModel.enableMyClass(true);//设为true,则div的class有效

效果就是当属性enableMyClass为true时，添加 class类样式myClass到div元素上，如果属性enableMyClass为false则不设置。

其中的"myClass"是要设置的class类样式名。

运行后的div代码为：

<div  class="myClass">
  some text
</div>

style 绑定

style 绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。

（注：如果你不是应用style值而是应用CSS class的话，请参考 css 绑定。）

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
   Profit Information
</div>

Js代码

var viewModel = {
    currentProfit: ko.observable(150000) // 初始化，内容黑色
};
viewModel.currentProfit(-50); //div内容变为红色

当属性enableMyClass的值小于0时，设置div的字体颜色为红色，否则为黑色。

运行后div的html代码为：

<div  style="color: red;">
   Profit Information
</div>

attr绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置 img 的 src 属性，链接的 href 属性。使用绑定，当模型属性改变的时候，它会自动更新。

Html代码

<a data-bind="attr: { href: url, title: details }">
    Report
</a>

Js代码

var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("这段文本将会作为a标签的title")
    };

设置超链接的href属性值为ViewModel的url值，设置超链接的title属性值为ViewModel的details值。

运行后超链接的html代码为：

<a  href="year-end.html" title="这段文本将会作为a标签的title">
    Report
</a>