knockout 学习实例4 css
<!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的更多相关文章
- knockout 学习实例7 foreach
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- knockout 学习实例6 attr
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- knockout 学习实例5 style
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...
- knockout 学习实例3 html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- knockout 学习实例2 text
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Knockout学习地址
Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
- 我们应当怎样学习HTML和CSS
目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...
随机推荐
- golang获取数据表转换为json通用方法
package main import ( "database/sql" "fmt" "log" "net/http" ...
- js 原生对象排序
//对象属性排序 function compare(propertyName) { return function (object1, object2) { var value1 = object1[ ...
- SPSS数据分析—多重线性回归
只有一个自变量和因变量的线性回归称为简单线性回归,但是实际上,这样单纯的关系在现实世界中几乎不存在,万事万物都是互相联系的,一个问题的产生必定多种因素共同作用的结果. 对于有多个自变量和一个因变量的线 ...
- 如何搭建一个linux服务器
1, 首先 下载一个linux server 系统镜像 ubuntu 64bit下载 http://www.ubuntu.com/download/server/thank-you/?version= ...
- ListView.DragEnter触发不了
经过千百度的搜索之后,终于找到了一点线索,原文是:https://msdn.microsoft.com/en-us/magazine/mt185571.aspx 有能力的可以参阅原文,想省事的可以等待 ...
- 转载---Java集合对象的深度复制与普通复制
原博文:http://blog.csdn.net/qq_29329775/article/details/49516247 最近在做算法作业时出现了错误,原因是没有弄清楚java集合的深度复制和浅度复 ...
- js——单选框radio
页面: ... <tr align="right"> <td align="right">会员性别:</td> <td ...
- sonar-gerrit-plugin-2.2.0 安装
这是一个很新的插件国内使用的用户还是很少的,公司有需要才花了一段时间去研究. 作用:在 code review的时候可以将sonar的检测结果直接集成返回.帮助po对code 进行review. 请严 ...
- iOS开发多线程篇—创建线程
iOS开发多线程篇—创建线程 一.创建和启动线程简单说明 一个NSThread对象就代表一条线程 创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...
- 如何使用 Quagga BGP（边界网关协议）路由器来过滤 BGP 路由
在之前的文章中,我们介绍了如何使用 Quagga 将 CentOS 服务器变成一个 BGP 路由器,也介绍了 BGP 对等体和前缀交换设置.在本教程中,我们将重点放在如何使用前缀列表prefix-li ...