Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定
4. css绑定
目的
css
绑定可以给关联的DOM元素添加或移除一个或多个CSS类。该绑定很有用,比如,当一些值为负数时高亮这些值为红色。
(注意:如果你不想使用一个CSS类选择器来附加样式而想直接给style
属性赋值,请看style绑定。)
静态类样式例子
<div data-bind="css: { profitWarning: currentProfit() < 0 }">Profit Information
</div><script type="text/javascript">var viewModel = {currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class};viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>
当currentProfit
的值小于0的时候,会应用样式profitWarning
,当值大于0的时候,会移除该类选择器样式。
动态类样式例子
<div data-bind="css: profitStatus">Profit Information
</div><script type="text/javascript">var viewModel = {currentProfit: ko.observable(150000)};// Evalutes to a positive value, so initially we apply the "profitPositive" classviewModel.profitStatus = ko.pureComputed(function() {return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";}, viewModel);// Causes the "profitPositive" class to be removed and "profitWarning" class to be addedviewModel.currentProfit(-50);
</script>
当currentProfit
的值为正数时,会应用profitPositive
样式,否则会应用profitWarning
样式。
参数
主参数
如果你想使用静态类名,你可以传入一个javascript对象,其属性是你的CSS类名,它们的值会计算为true
或false
来决定类选择器样式是否应用。你可以一次设置多个CSS类样式,比如,你的视图模型有一个叫
isSevere
的属性。
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
你甚至可以基于一些条件来设置多个CSS样式,只要样式名被引号包裹起来。
<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">
非布尔值会被试图转换为布尔值。比如,0
和null
会被看做false
,而21
和非空对象会被看做true
。
如果你的参数引用了一个监控值,当监控值发生改变时,CSS类会根据条件添加或移除。如果参数没有引用监控值,它只会在第一次添加或移除样式,之后不会这样做。
如果你想使用动态CSS类名,你可以传入一个字符串,字符串包含你想要加到元素上的类名。如果参数引用了一个监控值,绑定会移除旧值,然后添加对应的类名作为监控对象的新值。
通常情况下,你可以任意javascript表达式或函数作为参数值。KO会计算它们然后用结果值来决定CSS样式的增删。
- 额外参数
无
注意:应用不合法的javascript变量名的css样式类名
如果你想应用样式my-class
,你不能这样写:
<div data-bind="css: { my-class: someValue }">...</div>
因为my-class
不是一个合法的变量标识符。解决办法很简单,只要用引号把标识名包括起来,这样变成了一个字面量,javascript对象字面量是合法的。比如:
<div data-bind="css: { 'my-class': someValue }">...</div>
依赖
只有核心KO库
转载于:https://www.cnblogs.com/DHclly/p/6755417.html
Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定相关推荐
- Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定
5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...
- Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控
2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...
- Knockout v3.4.0 中文版教程-9-计算监控-API参考
5.参考 下面的内容描述了如何构建和使用计算监控. 1. 构建一个计算监控 可以用如下的形式构建一个计算监控: ko.computed( evaluator [, targetObject, opti ...
- itools官方下载2015 v3.1.7.0 中文版
itools官方下载2015 v3.1.7.0 中文版 软件大小:16MB 软件语言:简体中文 软件类别:手机工具 软件授权:官方版 更新时间:2015-02-04 应用平台:/Win8/Win7/W ...
- 《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.3 使用代码片断添加ActionScript...
本节书摘来自异步社区<Adobe Flash CS5 ActionScript 3.0中文版经典教程>一书中的第1章,第1.3节,作者: [美]Adobe公司 更多章节内容可以访问云栖社区 ...
- Lumion8.0中文版安装教程(附软件下载)
Lumion是一款可以实时的3D可视化工具,用来制作电影和静帧作品,涉及到的领域包含建筑.规划和设计: Lumion的强大在于它可以提供优秀的图像,并将快速和高效工作流程结合在一起,为使用者节省时间. ...
- 《Adobe Flash CS4 ActionScript 3.0中文版经典教程》——ActionScript 3.0简介
本节书摘来自异步社区<Adobe Flash CS4 ActionScript 3.0中文版经典教程>一书中的ActionScript 3.0简介,作者: [美]Adobe公司 更多章节内 ...
- Corel Knockout 2.0使用教程
Corel Knockout 2.0使用教程 2009年07月19日 21:43 一.将knockout 2.0安装在Photoshop中 下载knockout 2.0后,必须安装在photoshop ...
- uTorrent v3.5.0.44294 专业中文版
uTorrent是一款专业的BT种子下载工具,本软件大部分文件都以BT种子的形式发布在网络上,游戏,电影,等这些更是BT下载的热门资源,多数人使用迅雷来下载,但也有部分的人选择使用像本软件这种专业的B ...
- WORKNC 2021.0中文版软件+安装教程
WORKNC 2021.0中文版软件+安装教程 下载链接: https://pan.baidu.com/s/1KVFm_2JG9-jUVkzLuECx3w 提取码: pzyx
最新文章
- 后缀数组--(可重叠最长重复子串问题)
- maven(5)坐标和依赖
- Google AJAX 搜索 API
- WPF学习笔记(数据绑定篇3)
- shell 批量生成随机文件
- DS博客作业03--栈和队列
- LeetCode每日一题: 搜索插入位置(No.35)
- Kubernetes 的CRI-O容器引擎中存在严重漏洞
- 单源最短路径(最短路)
- HBase API 创建表
- 数据处理SPSS的数据类型分析
- 计算机启动应用程序的方法,应用程序无法正常启动,教您应用程序无法正常启动的解决方法...
- 【小程序】零基础微信小程序开发+实战项目
- Git Branching
- ios 根据日期知道周几_iOS 计算指定日期是周几星期几
- [推荐给程序员]热诚和勇气的力量
- [n年以前的诗] 怀念中XXXX年5月的泰山二首
- html怎么做整个屏幕的遮罩,html遮罩实现
- 最新vx红包封面小程序源码 附教程
- 【数学之美】分形图形动画演示欣赏