Konckout第五个实例:各种事件绑定
点击加一:
<!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">0</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(0); self.CountAdd = function(){ var currentIndex = self.CurrentIndex(); currentIndex = currentIndex+1; 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 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(); 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>
改进:当点击到二十时,提示,并且隐藏
<!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>
本博客作为一个入门者的自学记录,欢迎各位同行者不吝赐教。