Knockout开发中文API系列(9)-CSS绑定

全屏阅读
  • 基本信息

文章目录

目的

Css绑定主要是给DOM元素对象添加或移除一个或多个css class类名。这非常有用,比如当值变成负数的时候用红色高亮显示。

注意:如果你不想应用CSS class,而是采用style属性的话,请采用style绑定。

静态classes示例

  1. <div data-bind="css: { profitWarning: currentProfit() < 0 }">   
  2.    Profit Information   
  3. </div>   
  4.     
  5. <script type="text/javascript">   
  6.     var viewModel = {   
  7.         currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class   
  8.     };   
  9.     viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied   
  10. </script>  

currentProfit 的值小于0的时候将会给元素绑定上profitWarning 样式,当值大于0时移除样式。

动态classes示例

  1. <div data-bind="css: profitStatus">   
  2.    Profit Information   
  3. </div>   
  4.     
  5. <script type="text/javascript">   
  6.     var viewModel = {   
  7.         currentProfit: ko.observable(150000)   
  8.     };   
  9.     
  10.     // Evalutes to a positive value, so initially we apply the "profitPositive" class   
  11.     viewModel.profitStatus = ko.computed(function() {   
  12.         return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";   
  13.     }, viewModel);   
  14.     
  15.     // Causes the "profitPositive" class to be removed and "profitWarning" class to be added   
  16.     viewModel.currentProfit(-50);   
  17. </script>  

currentProfit 值是positive的时候将会给元素绑定上profitWarning 样式,其他情况下将会绑定profitWarning 样式。

参数

主要参数

如果你使用静态的CSS class名称,你可以传递一个属性名是CSS class名,值是true或者false的JavaScript对象来决定DOM元素是否应用class。

你可以一次使用多个CSS class。比如,你的view model含有一个属性isSevere

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

你可以在同一个条件下设置多个CSS class,名称用引号引起来。比如:

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

非bool值会被解析成bool值,比如:0或null会解析成false,像21、 non-null这样的对象会解析成true。

如果你的参数是observable 值,此绑定会在observable 值发生变化的之后添加或移除Css class。如果参数不是observable 值,那么CSS class只会添加或移除一次,以后不再变化。

如果你想使用动态Css class名称,你可以传递一个与Css class名称对应的字符串给你要添加的元素。如果参数是observable 值,绑定会移除元素之前添加的所有css class,并将对应的observable 新值添加给元素。
通常,你可以使用任意JavaScript表达式或者函数作为参数值。KO会自动执行它们通过返回的值来确定元素待添加或移除的Css class。

附加参数

注意:应用的Css class名称不能是不合法的JavaScript命名

如果你要添加的Css class名my-class,你不能这样写

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

因为my-class不是一个合法的JavaScript命名,解决方案是:在名称两边加上引号作为字符串使用,这样的命名是合法的JavaScript对象。例如:

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

依赖关系

除了Knockout核心库之外,无依赖关系。

顶一下
(5)
83.33%
订阅 回复
踩一下
(1)
16.67%
» 郑重声明:本文由木子辰发布,所有内容仅代表个人观点。版权归IT博客网志木子辰共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 16 条留言 其中:访客:16 条, 博主:0 条

  1. 便宜VPS Google Chrome Windows : 2016年08月24日15:27:17 16楼 回复

    朋友,交换链接吗?

给我留言