5. style绑定
目的
style
绑定用来给关联的DOM元素添加或移除一个或多个样式值。在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变。
(注意:如果你不想应用一个显示的样式值而想用分配一个CSS类样式,请参考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时,元素的style.color
属性会赋值red
,大于0会赋值black
。
参数
-
主参数
你应该传入一个javascript对象,其属性名对应样式名,值对应你想应用的样式值。
你可以一次设置多个样式。比如,你的视图模型有个属性叫做isSevere
,...
如果你的参数引用是一个监控值,当监控对象值改变时会自动更新对应绑定。如果参数引用的不是监控值,则只会更新一次。
通常,你可以使用任意的javascript表达式或函数作为参数值。KO会计算它们然后用它们的结果值来确定应该使用的样式值。
- 额外参数
无
注意:应用的样式名不是合法的javascript变量名
如果你想应用一个font-weight
或text-decoration
样式,或者其他任意样式,而其名字不是符合javascript定义(因为包含了连字符),你应该使用样式的javascript名称,比如:
- 不要写
{ font-weight: someValue }
; 应该写{ fontWeight: someValue }
- 不要写
{ text-decoration: someValue }
; 应该写{ textDecoration: someValue }
依赖
除了核心KO库以外都不依赖