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前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...
随机推荐
- Git最佳实践
1.git init 2.git add. 3.git add README.md 4.git commit -m "init" 5.git remote add origin h ...
- 在centos6.5中安装zookeeper集群
简介 ZooKeeper服务器是用Java编写创建,它运行在JVM.所以需要使用JDK 6或更高版本,在这里就不说在centos安装jdk环境了,直接进入正题,我搭建的是 192.168.0.2, 1 ...
- mybatis批量更新 UPDATE mysql
oracle和mysql数据库的批量update在mybatis中配置不太一样: oracle数据库: <update id="batchUpdate" parameterT ...
- Shell 教程
Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操 ...
- Laravel 流程分析——应用程序初始化
在整体分析中,我们看到Laravel首先会进行一个app的初始化,代码如下: $app = require_once __DIR__.'/../bootstrap/app.php'; 我们具体看看ap ...
- 实体类调用泛型父类中的静态方法中执行CRUD——第二版
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; namespa ...
- My Game --简介
曾经 我们雄心壮志,曾经 我们慷慨激昂,曾经 我们豪情满天涯. 曾经我们一起策划玩法,寻找背景题材,编写代码,幻想没有的更新.此刻由最后的孤狼把仅有成果分享给大伙. 所谓的玩法,背景,每个游戏都与众不 ...
- 使用excel快速制表 拒绝粗心
办公室打印个表格 使用了word打印后 发现 id重复很多 只好网上找了点excel 2003资料 学习小 快速制作表格 新建一个excel文件. 在新建excel中,用鼠标选中需要的表格行数列数,然 ...
- linux kernel tainted
日志中会有一些信息: dmesg | grep -i tainted 具体代码可以通过proc看到: cat /proc/sys/kernel/tainted 数字的意义: tainted: Non- ...
- ArrayList与普通数组的区别
import java.util.ArrayList; public class Shuzuqubie { public static void main(String[] args){ String ...