目的

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. [windows操作系统]内核性能剖析

    profile这个词有(1)外形.轮廓.外观.形象(2)印象.形象(3)人物简介(4)剖面图.侧面图等意.在计算机和通讯协议中这个词也非常常见.这里主要介绍一下它在软件系统性能分析领域的一个释义. 翻 ...

  2. Thread IsBcakgroud

    C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...

  3. HTTPS Everywhere – 保障隐私和信息安全的利器

    HTTPS Everywhere 是一款 Chrome 扩展程序,对于支持 HTTPS 的网站默认打开 HTTPS 加密传输来保障信息安全(HTTPS 介绍). HTTPS Everywhere 受到 ...

  4. SharePoint开发 - 使用Session(代码修改webconfig)

    博客地址 http://blog.csdn.net/foxdave SharePoint启用Session可以使用Powershell,戳这里:可以修改webconfig. 本篇叙述的重点是通过fea ...

  5. 项目管理软件kanboard安装

    1. php环境 2. php扩展

  6. CSS Overflow:hidden

    终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...

  7. 2013年7月份第2周51Aspx源码发布详情

    FineOffice自动化办公(OA)源码  2013-7-12 [ VS2010 ]源码描述:此源码使用fineui开发,作为村居使用的系统,所以命名为fineoffice,其实你在此基础上扩成CR ...

  8. 理解NSTypesetter 和 NSATSTypesetter

    先说通常意义上的typeset(排字.排版),然后再说NSTypesetter 和 NSATSTypesetter,最后是它们的区别. Typesetting is the composition o ...

  9. SAP 中如何寻找增强

    http://blog.csdn.net/edifierliu/article/details/5978824 查找SAP标准事务代码中使用的BADI: 在SE24中,查看类对象CL_EXITHAND ...

  10. Chapter 5: Container

    Chapter 5: Container A container is a module that processes the requests for a servlet and populates ...