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-weighttext-decoration样式,或者其他任意样式,而其名字不是符合javascript定义(因为包含了连字符),你应该使用样式的javascript名称,比如:

  • 不要写{ font-weight: someValue }; 应该写 { fontWeight: someValue }
  • 不要写 { text-decoration: someValue }; 应该写 { textDecoration: someValue }

    依赖

    除了核心KO库以外都不依赖

Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定的更多相关文章

  1. Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

  2. Knockout v3.4.0 中文版教程-15-控制文本内容和外观-attr绑定

    6. attr绑定 目的 attr绑定可以给关联DOM元素的任何属性赋值.这个绑定很棒,比如,当你想要设置通过视图模型给元素的title属性.img标签的src属性或超链接的href值,当视图模型对应 ...

  3. Knockout v3.4.0 中文版教程-12-控制文本内容和外观-html绑定

    3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <di ...

  4. Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定

    2. text绑定 目的 text绑定把传入的参数通过关联的DOM元素来显示文本值. 通常这对像<span>或<em>标签等使用,但技术上你可以对任何元素使用该绑定. 例子 T ...

  5. Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定

    4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...

  6. Knockout v3.4.0 中文版教程-16-控制流-foreach绑定

    2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...

  7. Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控

    2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...

  8. Knockout v3.4.0 中文版教程-1-入门和安装

    英文原版教程:http://knockoutjs.com/documentation/introduction.html 注:此教程根据英文原版翻译,仅作练习,如有不足或错误,请指正 说明: 对原文中 ...

  9. Knockout v3.4.0 中文版教程-4-通过监控数组工作

    2.通过监控数组工作 1. 监控数组 如果你想检测或者响应一个对象的改变,你用observables.如果你想检测和响应一个集合的改变,使用observableArray.这个在很多情况下都非常有用, ...

随机推荐

  1. 如何在spring环境中做单元测试

    在测试类的上方加入以下注解 @RunWith(SpringJUnit4ClassRunner.class)@ContextConfiguration("classpath:spring.xm ...

  2. 对shell的简单认识

    shell是一个命令解释器: shell分为交互式shell和非交互式shell: 交互式shell就是命令行一问一答:非交互式shell是像shell文本那样,一次解析文本, 并未在命令行给我们作出 ...

  3. Struts 2中访问Servlet API的几种方法小结

    1.使用ActionContext Action运行期间所用到的数据都保存在ActionContext中,例如session.客户端提交的参数等,ActionContext是Action的一个上下文对 ...

  4. BZOJ3073: [Pa2011]Journeys(线段树优化建图 Dijkstra)

    题意 \(n\)个点的无向图,构造\(m\)次边,求\(p\)到任意点的最短路. 每次给出\(a, b, c, d\) 对于任意\((x_{a \leqslant x \leqslant b}, y_ ...

  5. iOS之创建CocoaPods公有库教程

    简介 在开发过程中,经常会使用到第三框架,我们通过一个pod install命令,很方便的就将第三方框架加到我们自己的项目中. 如果我们也想将自己写的组件或库开源出去,让别人也可以通过pod inst ...

  6. MySQL主从复制原理介绍

    1)在mysql主库上,将改变记录到二进制日志(binary log)中. 2)在mysql从库上,IO线程将mysql主库上二进制日志(binary log)复制到中继日志(replay log)中 ...

  7. EJB2.0版本的HelloWorld

    EJB2.0版本的HelloWorld   虽然EJB3.1已经出来了,可是EJB2.0的项目还需要维护啊.下面写个简单EJB2.0的HelloWorld程序,练练手.   环境: JBoss 4.0 ...

  8. Ubuntu下Postgres安装与配置

    postgres8.4安装配置:1.安装postgres8.4~$ sudo apt-get install postgresql 2.修改超级管理员postgres密码:以系统用户运行psql~$ ...

  9. 解决Starting to watch source with Jekyll and Compass. Starting Rack on port 4000

    问题 Starting to watch source with Jekyll and Compass. Starting Rack on port 4000 rake aborted! Errno: ...

  10. libxml2.dylb 导致<libxml/tree.h> 老是找不到头文件

    添加了libxml2.dylb的framework ,结果还是引用不了<libxml/tree.h>,  老是提示找不到头文件. 这个问题其实比较容易解决,但是XCode的版本问题确实让开 ...