控制文本和外观------Style Binding(Style属性绑定)
目的
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属性绑定)的更多相关文章
- 控制文本和外观------Attr Binding(attr属性绑定)
Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...
- 控制文本和外观------CSS Binding(CSS类名绑定)
<style> .myColor{color:red;font-size:13px} .yourColor{color:green;font-size:34px}</style> ...
- KnockoutJS(4)-控制文本和外观绑定
控制文本和外观绑定 依赖关系:除了Knockout核心库之外,无依赖关系. 类别 目的 Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 Text绑定 Text绑定主要是 ...
- knockoutJS学习笔记05:控制文本和外观绑定
测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...
- Qt 外观之一 ——Qt Style Sheet
Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...
- Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定
4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...
- 用jquery的.val() 给具有style="display:none;" 属性的标签写值的问题。
今天写项目, 碰到奇怪现象, 用jquery的val()函数怎么都无法给标签赋值,而我确定是否赋值是通过浏览器控制台来看的.其实这种方式不准确,因为具有 style="display:non ...
- OAF_VO系列3 - Binding Style绑定方式
在OAF VO开发中,Binding Style主要用于对VO的where clause做动态传值,总共有三种方式 1. Oracle Named 2. Oracle Posi ...
- 复习-css控制文本字体属性
css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...
随机推荐
- [Swift2.0系列]Defer/Guard 基础语法
1.Defer Swift2.0中加入了defer新语法声明.defer译为延缓.推迟之意.那么在Swift2.0中它将被应用于什么位置呢?比如,读取某目录下的文件内容并处理数据,你需要首先定位到文件 ...
- SharePoint 2016 的新特性概览(一)(What's New for IT Professionals in SharePoint Server 2016)
博客地址:http://blog.csdn.net/FoxDave 今天看霖雨大神的转的微软最新的关于SharePoint 2016的Update,正好看到了SP2016新发布的视频,整理一下发出 ...
- JAVA调用系统命令或可执行程序--返回一个Runtime运行时对象,然后启动另外一个进程来执行命令
通过 java.lang.Runtime 类可以方便的调用操作系统命令,或者一个可执行程序,下面的小例子我在windows和linux分别测试过,都通过.基本原理是,首先通过 Runtime.getR ...
- 【Android】去除应用启动时黑屏现象
http://www.eoeandroid.com/blog-1169143-47979.html 在AndroidManifest里面定义的时候,在启动的Activity,添加android:the ...
- 王家卫i
〈旺角卡门〉 因为我很了解我自己,我不能对你承诺什么. 你不要说两次,说两次我就相信了. 我宁愿做一日英雄,都不想成世做条虫! 厨房里有煮好的饭,另外我还买了几个杯子,我知道,用不了多久就都会被打破, ...
- setuptools,pip,install,UnicodeDecodeError: 'ascii' codec can't decode byte.原因和解决方案
昨天重装Python2.7.6时,为了安装第三方库,我去下pip.为了装pip,又得先装 ez_setup.py.结果装ez_setup时,遇到了问题,报错: UnicodeDecodeError: ...
- HDU 2829 Lawrence (斜率DP)
斜率DP 设dp[i][j]表示前i点,炸掉j条边的最小值.j<i dp[i][j]=min{dp[k][j-1]+cost[k+1][i]} 又由得出cost[1][i]=cost[1][k] ...
- VundleVim的安装与使用
git:https://github.com/VundleVim/Vundle.vim vundle是一款vim编辑器的插件管理软,用起来很方便的原因有几点: 1)只要知道插件名称,就能搜索到并下载安 ...
- Weblogic项目部署及数据源配置
号线项目总结: weblogic项目配置: 把工作区放到磁盘上,建立weblogic域 在安装的weblogic服务器的开始项里选择 进入weblogic域的建立. 建立完域后用Myeclipse打开 ...
- 【题解】【排列组合】【素数】【Leetcode】Unique Paths
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...