<!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. Git最佳实践

    1.git init 2.git add. 3.git add README.md 4.git commit -m "init" 5.git remote add origin h ...

  2. 在centos6.5中安装zookeeper集群

    简介 ZooKeeper服务器是用Java编写创建,它运行在JVM.所以需要使用JDK 6或更高版本,在这里就不说在centos安装jdk环境了,直接进入正题,我搭建的是 192.168.0.2, 1 ...

  3. mybatis批量更新 UPDATE mysql

    oracle和mysql数据库的批量update在mybatis中配置不太一样: oracle数据库: <update id="batchUpdate" parameterT ...

  4. Shell 教程

    Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操 ...

  5. Laravel 流程分析——应用程序初始化

    在整体分析中,我们看到Laravel首先会进行一个app的初始化,代码如下: $app = require_once __DIR__.'/../bootstrap/app.php'; 我们具体看看ap ...

  6. 实体类调用泛型父类中的静态方法中执行CRUD——第二版

    using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; namespa ...

  7. My Game --简介

    曾经 我们雄心壮志,曾经 我们慷慨激昂,曾经 我们豪情满天涯. 曾经我们一起策划玩法,寻找背景题材,编写代码,幻想没有的更新.此刻由最后的孤狼把仅有成果分享给大伙. 所谓的玩法,背景,每个游戏都与众不 ...

  8. 使用excel快速制表 拒绝粗心

    办公室打印个表格 使用了word打印后 发现 id重复很多 只好网上找了点excel 2003资料 学习小 快速制作表格 新建一个excel文件. 在新建excel中,用鼠标选中需要的表格行数列数,然 ...

  9. linux kernel tainted

    日志中会有一些信息: dmesg | grep -i tainted 具体代码可以通过proc看到: cat /proc/sys/kernel/tainted 数字的意义: tainted: Non- ...

  10. ArrayList与普通数组的区别

    import java.util.ArrayList; public class Shuzuqubie { public static void main(String[] args){ String ...