Style属性绑定

目的

style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)

例子

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">   
Profit Information
</div>
<script type="text/javascript">
var viewModel = {
        currentProfit: ko.observable(150000)
 // Positive value, so initially black 
   };
    viewModel.currentProfit(-50); 
// Causes the DIV's contents to go red</script>

当currentProfit 小于0的时候div的style.color是红色,大于的话是黑色。

参数

主参数

该参数是一个JavaScript对象,属性是你的style的名称,值是该style需要应用的值。

你可以一次设置多个style值。例如,如果你的view model有一个叫isServre的属性,

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">
...
</div>

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

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

其它参数

注:应用的style的名字不是合法的JavaScript变量命名

如果你需要应用font-weight或者text-decoration,你不能直接使用,而是要使用style对应的JavaScript名称。

错误:{ font-weight: someValue }; 正确:{ fontWeight: someValue }

错误:{ text-decoration: someValue }; 正确:{ textDecoration: someValue }

参考:style名称和对应的JavaScript 名称列表。

依赖性

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

同样是用于控制样式,不过该绑定用于控制样式的细节:

控制DOM元素的Style属性,比如color,width等 会根据所绑定的bool值(或者可以返回bool值的js表达式),给元素 移除/添加 对应的Style属性 如果与observable或者computed属性绑定,则会产生双向绑定效果。