控制文本和外观------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 ...
随机推荐
- [windows操作系统]内核性能剖析
profile这个词有(1)外形.轮廓.外观.形象(2)印象.形象(3)人物简介(4)剖面图.侧面图等意.在计算机和通讯协议中这个词也非常常见.这里主要介绍一下它在软件系统性能分析领域的一个释义. 翻 ...
- Thread IsBcakgroud
C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...
- HTTPS Everywhere – 保障隐私和信息安全的利器
HTTPS Everywhere 是一款 Chrome 扩展程序,对于支持 HTTPS 的网站默认打开 HTTPS 加密传输来保障信息安全(HTTPS 介绍). HTTPS Everywhere 受到 ...
- SharePoint开发 - 使用Session(代码修改webconfig)
博客地址 http://blog.csdn.net/foxdave SharePoint启用Session可以使用Powershell,戳这里:可以修改webconfig. 本篇叙述的重点是通过fea ...
- 项目管理软件kanboard安装
1. php环境 2. php扩展
- CSS Overflow:hidden
终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...
- 2013年7月份第2周51Aspx源码发布详情
FineOffice自动化办公(OA)源码 2013-7-12 [ VS2010 ]源码描述:此源码使用fineui开发,作为村居使用的系统,所以命名为fineoffice,其实你在此基础上扩成CR ...
- 理解NSTypesetter 和 NSATSTypesetter
先说通常意义上的typeset(排字.排版),然后再说NSTypesetter 和 NSATSTypesetter,最后是它们的区别. Typesetting is the composition o ...
- SAP 中如何寻找增强
http://blog.csdn.net/edifierliu/article/details/5978824 查找SAP标准事务代码中使用的BADI: 在SE24中,查看类对象CL_EXITHAND ...
- Chapter 5: Container
Chapter 5: Container A container is a module that processes the requests for a servlet and populates ...