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>

 

posted @ 2017-04-21 11:21  党兴明  阅读(298)  评论(0)  编辑  收藏  举报