点击加一：
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
KNOCKOUT LESSON
</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
#content1{padding:16px;}
</style>
<script type="text/javascript" src="scripts/knockout30.js"></script>
</head> <body>
<div id="content1">
<b id="countView" data-bind="html:CurrentIndex"></b><br />
<input id="countButton" type="button" value="点击" data-bind="click:CountAdd" />
</div> <script type="text/javascript" src="scripts/jQuery183.js"></script>
<script>
$(document).ready(function(){
/*var currentindex = 0;
var countButton = $('#countButton');
var countView = $('#countView');
countButton.on('click',function(){
currentindex = currentindex + 1;
countView.html(currentindex);
});*/
var ViewModel = function(){
var self = this;
self.CurrentIndex = ko.observable();
self.CountAdd = function(){
var currentIndex = self.CurrentIndex();
currentIndex = currentIndex+;
self.CurrentIndex(currentIndex);
}
}
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel); });
</script> </body>
</html>
点击加一，悬停变红：绑定多个事件
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
KNOCKOUT LESSON
</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
#content1{padding:16px;}
</style>
<script type="text/javascript" src="scripts/knockout30.js"></script>
</head> <body>
<div id="content1">
<b id="countView" data-bind="html:CurrentIndex,style:{color:IndexColor}" style=""></b><br />
<!--<input id="countButton" type="button" value="点击" data-bind="click:CountAdd" />-->
<input id="countButton" type="button" value="点击" data-bind="event:{click:CounterAdd,mouseover:CounterOver,mouseout:CounterOut}" />
</div> <script type="text/javascript" src="scripts/jQuery183.js"></script>
<script>
$(document).ready(function(){
var ViewModel = function(){
var self = this;
self.CurrentIndex = ko.observable();
self.CounterAdd = function(){
var currentIndex = self.CurrentIndex();
currentIndex = currentIndex+;
self.CurrentIndex(currentIndex);
};
self.IndexColor = ko.observable('black');
self.CounterOver = function(){
self.IndexColor('red');
};
self.CounterOut = function(){
self.IndexColor('black');
};
}
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel);
});
</script> </body>
</html>
改进：当点击到二十时，提示，并且隐藏
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
KNOCKOUT LESSON 4
</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
#content1{padding:16px;}
</style>
<script type="text/javascript" src="scripts/knockout30.js"></script>
</head> <body>
<div id="content1">
<b id="countView" data-bind="html:CurrentIndex,style:{color:IndexColor}" style="">0</b><br />
<!--<input id="countButton" type="button" value="点击" data-bind="click:CountAdd" />-->
<input id="countButton" type="button" value="点击" data-bind="event:{click:CounterAdd,mouseover:CounterOver,mouseout:CounterOut}" />
</div> <script type="text/javascript" src="scripts/jQuery183.js"></script>
<script>
$(document).ready(function(){
var ViewModel = function(){
var self = this;
self.CurrentIndex = ko.observable(0);
self.CounterAdd = function(){
var currentIndex = self.CurrentIndex();
if(currentIndex >= 20){
alert('你点击次数过多');
$('#countView').hide();
return false;
}else{
currentIndex = currentIndex+1;
self.CurrentIndex(currentIndex);
}
};
self.IndexColor = ko.observable('black');
self.CounterOver = function(){
self.IndexColor('red');
};
self.CounterOut = function(){
self.IndexColor('black');
};
}
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel);
});
</script> </body>
</html>