<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">

        .profitWarning{font-size:20px;color:#f00;}

    </style>

</head>

<body>

<div data-bind="css: { profitWarning: currentProfit() < 0 }">

   Profit Information

</div>

<script type="text/javascript">

    var viewModel = {

        currentProfit: ko.observable(150000)

    };

    ko.applyBindings(viewModel);

    setTimeout(function(){

        viewModel.currentProfit(-50);

    },2000)

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">

        .profitWarning{font-size:20px;color:#f00;}

        .profitPositive{font-size:30px;color:#0f0;}

    </style>

</head>

<body>

<div data-bind="css: profitStatus">

   Profit Information

</div>

<script type="text/javascript">

    var viewModel = {

        currentProfit: ko.observable(150000)

    };

    viewModel.profitStatus = ko.pureComputed(function() {

        return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";

    }, viewModel);

    viewModel.currentProfit(-50);

    ko.applyBindings(viewModel);

    setTimeout(function(){

        viewModel.currentProfit(50);

    },2000);

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">

        .profitWarning{font-size:20px;color:#f00;}

        .profitPositive{font-size:30px;color:#0f0;}

    </style>

</head>

<body>

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

<script type="text/javascript">

// div css 当currentProfit小于0时 class中有profitWarning

//div css 当isSevere等于真时 class中有majorHighlight

    var viewModel = {

        currentProfit: ko.observable(150000),

        isSevere:true

    };

    viewModel.currentProfit(-50);

    ko.applyBindings(viewModel);

</script>

</body>

</html>

css绑定时，如果用my-class会报错,如果非要用就需要加引号

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">

        .profitWarning{font-size:20px;color:#f00;}

        .profitPositive{font-size:30px;color:#0f0;}

    </style>

</head>

<body>

<div data-bind="css: { my-class: someValue }">...</div>

<script type="text/javascript">

／／会报错

    var viewModel = {

        someValue:true

    };

ko.applyBindings(viewModel);

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">

        .profitWarning{font-size:20px;color:#f00;}

        .profitPositive{font-size:30px;color:#0f0;}

    </style>

</head>

<body>

<div data-bind="css: { 'my-class': someValue }">...</div>

<script type="text/javascript">

//不会报错

    var viewModel = {

        someValue:true

    };

ko.applyBindings(viewModel);

</script>

</body>

</html>

knockout 学习实例4 css的更多相关文章

  1. knockout 学习实例7 foreach

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. knockout 学习实例6 attr

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. knockout 学习实例5 style

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...

  4. knockout 学习实例3 html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. knockout 学习实例2 text

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Knockout学习地址

    Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...

  7. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  8. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  9. 我们应当怎样学习HTML和CSS

    目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...

随机推荐

  1. KindEditor4.1.10,支持粘贴图片（转载！）

    本人扩展了KindEditor4.1.10,使得他能够在Chrome和IE11中直接粘贴复制的图片(比如通过截图工具把图片直接保存在剪切板中),然后调用上传URL上传图片 方法,修改kindedito ...

  2. SG函数 专题练习

    [hdu1536][poj2960]S-Nim 题意 题意就是给出一个数组h,为每次可以取石子的数目. 然后给你n堆石子每堆si.求解先手能不能赢? 分析 根据\(h\)数组预处理出\(sg[i]\) ...

  3. Educational Codeforces Round 14 D. Swaps in Permutation

    题目链接 分析:一些边把各个节点连接成了一颗颗树.因为每棵树上的边可以走任意次,所以不难想出要字典序最大,就是每棵树中数字大的放在树中节点编号比较小的位置. 我用了极为暴力的方法,先dfs每棵树,再用 ...

  4. 如何通过pid快速找出进程的路径

    [carlton@oc3408554812 Desktop]$ top top - 09:35:06 up 32 min,  2 users,  load average: 1.49, 1.56, 1 ...

  5. ORM原型概念

    ORM[Object-Relation-Mapping]对象关系映射. 这个名词已经出来好几年了.已经不陌生.  以前在项目中针对相对复杂业务逻辑时一般采用领域模型驱动方式进行业务概述,分析和建模. ...

  6. 连接到CentOS(Linux)服务器ssh、mysql缓慢

    现象: 服务器163与服务器164在同一机柜,双绞线直接连接,从办公室或者服务器163去连机服务器164的ssh.mysql均缓慢,让机房人员查了,无果.而164却正常. 最后发现两个机器/etc/r ...

  7. HTML5 的data-* 自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是 data-*自定义属性. 在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放. 当然高级浏览器下可通过脚本 ...

  8. HTML特殊符号对照表

    特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι Ι Κ Κ Κ Λ Λ Λ Μ ...

  9. Cordova android框架详解

    一.Cordova 核心java类说明 CordovaActivity:Cordova Activity入口,已实现PluginManager.WebView的相关初始化工作, 只需继承Cordova ...

  10. Libgdx 开发指南(1.2) 应用框架——模块概览

    模块概览 引言 LibGDX由一些为一个典型游戏架构中的各个步骤提供服务的模块组成. Input:为所有平台提供一致的输入模型与处理器.支持键盘.触屏.加速度传感器与鼠标. Graphics:使用硬件 ...