<!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. mac Zip 常用命令

    最通俗的用法 zip -q -r -e -m -o [yourName].zip someThing -q 表示不显示压缩进度状态 -r 表示子目录子文件全部压缩为zip  //这部比较重要,不然的话 ...

  2. 主成分分析（PCA）核心思想

    参考链接:http://pinkyjie.com/2011/02/24/covariance-pca/ PCA的本质其实就是对角化协方差矩阵. PCA就是将高维的数据通过线性变换投影到低维空间上去,但 ...

  3. hasOwnProperty，in

    hasOwnProperty,in区别: hasOwnProperty:指出一个对象是否具有指定名称的属性 in:对象是否能够访问此属性(包括直接在对象上访问和通过原型访问) 看下示例代码: (fun ...

  4. [cocos2d-x]OPENGL ES支持的像素格式

    OPENGL ES最多支持32位颜色值. 支持的像素格式有以下几种: 客户端格式 GL格式 GL数据类型 字节数 RGBA8888 GL_RGBA GL_UNSIGNED_BYTE 4 RGB888 ...

  5. MySQL学习笔记--基本操作

    1.登录数据库 在命令行输入 "mysql -u username -p" 回车后输入密码 2.选择数据库 USE datebase name,选择要操作的数据库 3.显示所有数据 ...

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

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

  7. hessian 协议

    什么是Hessian协议呢? 目前,Web服务技术是解决异构平台系统的集成及互操作问题的主流技术. 它所基于的XML已经是Internet上交换数据的实际标准,基于通用的进程间通信协议和网络传输协议屏 ...

  8. jfinal 基本应用 --事务回滚

    事务回滚 1.当时需要用到事务回滚,但是看到网上只有问题,没有真实的到底怎么用法. 2.我看了一下文档,结合了网上的大神的博客. 第一种方法: Db.tx(new IAtom(){ @Override ...

  9. guava学习--集合2&Range

    转载:http://www.cnblogs.com/peida/p/Guava_ImmutableCollections.html Table: 当我们需要多个索引的数据结构的时候,通常情况下,我们只 ...

  10. application loader上传报90158错误

    ERROR ITMS-90158:"The following URL schemes found in your app are not in the current format:[XX ...