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前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...
随机推荐
- Java队列工具类(程序仅供练习)
public class QueueUtils<T> { public int defaultSize; public Object[] data; public int front = ...
- ios 打包
/usr/bin/xcodebuild -scheme Moon -sdk iphoneos -workspace Moon.xcworkspace -configuration Release cl ...
- PDF解析
解析如下图PDF文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
- JavaEE 7技术一览
参见此文: https://my.oschina.net/Barudisshu/blog/334903 perfect
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- [TD Cup 2014] TDL的YC牌 & TDL的幼儿园
TDL的YC牌 传说中的置换群?反正不懂.我的思路竟然是对的,可是为何只有20分? (1)尼玛每行数据输出后回车不打! (2)写gcd函数脑残把a mod b写成a-b,大大减慢速度… (3)看标程才 ...
- MongoDB下载文件 百度盘共享
1> mongodb下载地址: http://www.mongodb.org/downloads 官方下载不了,可以到百度共享盘里面下载 MongoDB 2.6.5 Windows 64位: ...
- MyJni
package com.baidu.jnitest; import android.os.Bundle; import android.app.Activity; import android.vie ...
- AD 10 原理图编译错误
在编译原理图时,经常会出现以下错误和警告,这里简单的累出一些错误和警告的原因: 1.floating net labels,这个是应为网标防止错误,应该将网标放在I/O或这连线的端点,或者是网标表错了 ...
- RDMA的ibv_post_send() 函数
函数原型为 int ibv_post_send(struct ibv_qp *qp, struct ibv_send_wr *wr, struct ibv_send_wr **bad_wr); 其中s ...