控制文本和外观------CSS Binding(CSS类名绑定)

<style>
.myColor{color:red;font-size:13px}
.yourColor{color:green;font-size:34px}
</style>
<div data-bind="style: { color:'red', fontWeight:'bold' }">...</div>
<!--分别写不同的CSS样式，当条件满足是就调用当前的css样式，其他的样式被忽略-->
<div id="test" data-bind="css:{ 'myColor' :t()<0,'yourColor':t()>0}"> This is css Test</div>
<script>
var viewModel = {
t:ko.observable(100)
}
viewModel.t(-100);
setTimeout(function(){viewModel.t(10);},1000);

ko.applyBindings(viewModel);
</script>

• 目的

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

   

  例子

  <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 CSS class到元素上，如果大于0则删除这个CSS class。

   

  参数

      主参数

      该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。

      你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，

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

      非布尔值会被解析成布尔值。例如， 0和null被解析成false，21和非null对象被解析成true。

      如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是，那CSS class将会只添加或者删除一次并且以后不在更新。

      你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。

      其它参数

          无

   

  注：应用的CSS class的名字不是合法的JavaScript变量命名

  如果你想使用my-class class，你不能写成这样：

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

  … 因为my-class不是一个合法的命名。解决方案是：在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字（从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的）。例如,

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

   

  依赖性

  除KO核心类库外，无依赖。

• ko内置的基础绑定之一 。
• 用于控制DOM元素的class属性(因此个人认为叫做class binding更直接一些)。
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的class名称
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。