<!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. MUMmer 3使用方法

    DNA和核苷酸的快速比对软件包,基于suffix tree 数据结构,快速.图形化.模块可用于其他软件.可进行大基因组比对.多对多基因组比对. The MUMmer Home Page The MUM ...

  2. python核心编程第六章练习6-9

    6-9.转换.为练习5-13写一个姊妹函数,接受分钟数,返回小时数和分钟数.总时间不变,并且要求小时尽可能大.[答案]代码如下: #!/usr/bin/env python # translate m ...

  3. Spring事务管理者与Spring事务注解--声明式事务

    1.在Spring的applicationContext.xml中配置事务管理者 PS:具体的说明请看代码中的注释 Xml代码: <!-- 声明式事务管理的配置 --> <!-- 添 ...

  4. <转>下一代Asp.net开发规范OWIN（1）—— OWIN产生的背景以及简单介绍

    2014-09-04 07:22 by JustRun http://www.cnblogs.com/JustRun1983/p/3955238.html 随着VS2013的发布,微软在Asp.Net ...

  5. Codeforces Round #371 (Div. 2) C. Sonya and Queries

    题目链接 分析:01trie树,很容易就看出来了,也没什么好说的.WA了一发是因为没有看见如果数字位数大于01序列的时候01序列也要补全0.我没有晚上爬起来打,白天发现过的人极多. /******** ...

  6. [转]Jenkins Xcode打包ipa

    本地打包. 如果Mac 上没有安装brew.先安装:ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/ins ...

  7. tslib1.4与Qt4.8.6的交叉编译与移植

    最近开始正式接触QT开发,网上看了些移植教程都写的有点乱,博客园的emouse思·睿有一篇写的很好的文章,下面是文章的链接 http://www.cnblogs.com/emouse/archive/ ...

  8. 转摘： CSDN linxianliang5201314 的 blog ------sql解释执行顺序

    我们做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动 大,那么我么还能保证下一段时间系统还能流畅的运行吗?我么 ...

  9. 常用的工具cmd命令

    1.stikynot 2.psr 3.cmd 4.calc 5.mspaint 6.ping

  10. JEECMS v8 发布，java 开源 CMS 系统

    JEECMSv8 是国内java开源CMS行业知名度最高.用户量最大的站群管理系统,支持栏目模型.内容模型交叉自定义.以及具备支付和财务结算的内容电商为一体:  对于不懂技术的用户来说,只要通过后台的 ...