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前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...
随机推荐
- 鼠标滑过弹出jquery在线客服
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- tiny_cnn 阅读（1）
从今天起, 我会每天把阅读tiny_cnn的阅读心得提交到博客园中希望大家在这个平台上可以多多交流: 关于如果阅读代码? 抓住重点,忽略细节 首先打开从github上下载的文件: 通过csdn和网上搜 ...
- .NET 4.5 WPF Ribbon
文/嶽永鹏 Visual Studio 2012 DO.NET 4.5 Ribbon 界面编程. 代码 =============================================== ...
- 使用ueditor中的setContent() 时经常报innerHtml错误（笔记）
1)今天遇到个问题,使用ueditor中的setContent() 时经常报innerHtml错误:网上找了下解决方案:发现这个可以用: 不能创建editor之后马上使用ueditor.setCont ...
- Java 并发和多线程(三) 多线程的代价 [转]
原文链接:http://tutorials.jenkov.com/java-concurrency/costs.html 作者:Jakob Jenkov 翻译:古圣昌 校对:欧振 ...
- iOS开发UI篇—UITableview控件基本使用
iOS开发UI篇—UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) #import <Foundation/Foundation.h> ...
- 【转】Ant学习笔记——自己构建Ant编译环境
自从年初开始用NetBeans6.0,才接触到Ant. 这是今年6月份的一篇Ant学习笔记.安装 1.下载并构建环境. 去官网下载src包和bin包.解压缩它们到同一目录,运行build.bat, ...
- BestCoder Round #41
T1:ZCC loves straight flush(hdu 5228) 题目大意: 给出5张牌,问至少替换多少张牌可以构成同花顺. 题解: 1.直接枚举所有同花顺(枚举花色A-D和最小的数字1-1 ...
- 《大象-Think In UML》读书笔记3
建模,是指通过对客观事物建立一种抽象的方法用以表征事物并过得对事物本身的理解,同时把这种理解概念化,将这些逻辑概念组织起来,构成一种对所观察的对象的内部结构和工作原理的便于理解的表达. 建模包含两个问 ...
- Java中正则表达式及其常用类Math、Calendar、Date、BigDecimal、BigInterger、System、Rondom的使用
1:正则表达式(理解) (1)就是符合一定规则的字符串 (2)常见规则 A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') \r 回车符 ( ...