目的

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属性绑定)的更多相关文章

  1. 控制文本和外观------Attr Binding(attr属性绑定)

    Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...

  2. 控制文本和外观------CSS Binding(CSS类名绑定)

    <style> .myColor{color:red;font-size:13px} .yourColor{color:green;font-size:34px}</style> ...

  3. KnockoutJS(4)-控制文本和外观绑定

    控制文本和外观绑定 依赖关系:除了Knockout核心库之外,无依赖关系. 类别 目的 Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 Text绑定 Text绑定主要是 ...

  4. knockoutJS学习笔记05:控制文本和外观绑定

    测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...

  5. Qt 外观之一 ——Qt Style Sheet

    Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...

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

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

  7. 用jquery的.val() 给具有style="display:none;" 属性的标签写值的问题。

    今天写项目, 碰到奇怪现象, 用jquery的val()函数怎么都无法给标签赋值,而我确定是否赋值是通过浏览器控制台来看的.其实这种方式不准确,因为具有 style="display:non ...

  8. OAF_VO系列3 - Binding Style绑定方式

    在OAF VO开发中,Binding Style主要用于对VO的where clause做动态传值,总共有三种方式 1.       Oracle Named 2.       Oracle Posi ...

  9. 复习-css控制文本字体属性

    css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...

随机推荐

  1. [Swift2.0系列]Defer/Guard 基础语法

    1.Defer Swift2.0中加入了defer新语法声明.defer译为延缓.推迟之意.那么在Swift2.0中它将被应用于什么位置呢?比如,读取某目录下的文件内容并处理数据,你需要首先定位到文件 ...

  2. SharePoint 2016 的新特性概览(一)(What's New for IT Professionals in SharePoint Server 2016)

    博客地址:http://blog.csdn.net/FoxDave 今天看霖雨大神的转的微软最新的关于SharePoint 2016的Update,正好看到了SP2016新发布的视频,整理一下发出 ...

  3. JAVA调用系统命令或可执行程序--返回一个Runtime运行时对象,然后启动另外一个进程来执行命令

    通过 java.lang.Runtime 类可以方便的调用操作系统命令,或者一个可执行程序,下面的小例子我在windows和linux分别测试过,都通过.基本原理是,首先通过 Runtime.getR ...

  4. 【Android】去除应用启动时黑屏现象

    http://www.eoeandroid.com/blog-1169143-47979.html 在AndroidManifest里面定义的时候,在启动的Activity,添加android:the ...

  5. 王家卫i

    〈旺角卡门〉 因为我很了解我自己,我不能对你承诺什么. 你不要说两次,说两次我就相信了. 我宁愿做一日英雄,都不想成世做条虫! 厨房里有煮好的饭,另外我还买了几个杯子,我知道,用不了多久就都会被打破, ...

  6. setuptools,pip,install,UnicodeDecodeError: 'ascii' codec can't decode byte.原因和解决方案

    昨天重装Python2.7.6时,为了安装第三方库,我去下pip.为了装pip,又得先装 ez_setup.py.结果装ez_setup时,遇到了问题,报错: UnicodeDecodeError:  ...

  7. 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] ...

  8. VundleVim的安装与使用

    git:https://github.com/VundleVim/Vundle.vim vundle是一款vim编辑器的插件管理软,用起来很方便的原因有几点: 1)只要知道插件名称,就能搜索到并下载安 ...

  9. Weblogic项目部署及数据源配置

    号线项目总结: weblogic项目配置: 把工作区放到磁盘上,建立weblogic域 在安装的weblogic服务器的开始项里选择 进入weblogic域的建立. 建立完域后用Myeclipse打开 ...

  10. 【题解】【排列组合】【素数】【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 ...