<!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. callee

    首先解释callee 参考网站 http://www.css88.com/archives/1706 callee是arguments的一个成员,仅当函数正在执行的时候才可用,so用于递归也行 代码示 ...

  2. Linux Vim不明原因卡死解决办法

    使用vim的时候,偶尔会碰到vim莫名其妙的僵在那里. 解决方案: 经查,原来Ctrl+S在Linux里是锁定屏幕的快捷键,如果要解锁,按下Ctrl+Q就可以了. 经验总结: 牢记这两个VIM组合键 ...

  3. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  4. javascript 特殊的一些知识

    基础知识 1.注释/**/ 块注释,与正则表达式有冲突,不安全. 2.js数字类型只有一个,即为64位的浮动值 3.NaN是一个数值,他不能产生正常结果的运算结果.NaN不等于任何值,包括它自己.is ...

  5. Objective－C（ protocol协议）

    protocol 协议 protocol:用来声明方法 1.协议的定义 @protocol 协议名称 <NSObject> // 方法声明列表.... @end 2.如何遵守协议 1> ...

  6. cookie包含中文导致的问题

    周五项目测试完毕没问题之后上线,上线之后发现有的账户登录不上 原因为,用来记录追踪用户的cookie中包含cookie.读取,写入时候发生异常. 异常大概是这个样子: java.lang.Illega ...

  7. Java：多线程<一>

    程序运行时,其实是CPU在执行程序的进程,为了提高工作效率一个进程可以有多个线程. Java的多线程: 其实我们之前就见过Java的线程,main就是Java的一个线程,还有另一个条线程总是和main ...

  8. 转：Ajax中的get和post两种请求方式的异同

    1. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML ...

  9. php的特性

    PHP的特性包括: 1. PHP 独特的语法混合了 C.Java.Perl 以及 PHP 自创新的语法. 2. PHP可以比CGI或者Perl更快速的执行动态网页——动态页面方面,与其他的编程语言相比 ...

  10. java中byte, int的转换

    最近在做些与编解码相关的事情,又遇到了byte和int的转换,看着那些关于反码.补码的说明依旧头疼,还是记下些实用的方法吧.int -> byte可以直接使用强制类型转换: byte b = ( ...