首页 > 其他 > 详细

Style Binding(Style属性绑定)

时间:2015-08-18 09:01:11      阅读:257      评论:0      收藏:0      [点我收藏+]

目的

 

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

 

<div data-bind="style: { color:‘red‘, fontWeight:‘bold‘ }">...</div> 

<script>
  var viewModel = {
      t:ko.observable()
     }
 
  ko.applyBindings(viewModel);
</script>

即使绑定不用动态变化,也需要加入 ko.applyBindings(); 

例子

<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 Binding(Style属性绑定)

原文:http://www.cnblogs.com/jinling/p/4738309.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!