点击加一：

<!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>

Konckout第五个实例：各种事件绑定的更多相关文章

  1. Konckout第三个实例：循环绑定 -- table列表数据的填充

    传统js:拼接字符串,再写入指定标签中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. 小程序实践（五）：for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

  3. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  4. jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate ...

  5. JavaScript(第二十五天)【事件绑定及深入】

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能.   一．传统事件绑定的问题 传统事件绑定有内联模型 ...

  6. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  7. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  8. MVVM设计模式和在WPF中的实现（四） 事件绑定

    系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...

  9. 微信小程序事件绑定

    一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: <input type="text" bindinput="handleInp ...

随机推荐

  1. 在DirectShow的视频图像上叠加线条和文字

    在DirectShow的视频图像上叠加线条和文字 最近一直在从事工业测量方面的开发工作,难免会用到各种各样的相机,其中支持DX的USB相机开发起来比较方便,由于工作需要经常要在视频图像上叠加线条和文字 ...

  2. Java Web项目（Extjs）报错九

    1.Java Web项目(Extjs)报错九 具体报错如下: 三月 26, 2014 11:48:35 下午 org.hibernate.util.JDBCExceptionReporter logE ...

  3. C#连接oracle数据库步骤

    1.  确认操作系统类型,操作系统是64位还是32位: 2.  按对应版本安装oralce客户端版本(64位还是32位): 3.  安装oralce管理员模块,同时赋予安装目录权限 4.  注册old ...

  4. 查找IFileSourceFilter上的Pin

    创建了IFileSourceFilter,可IFileSourceFilter好像不是从IBaseFilter继承来的,没有EnumPins,那应该怎么查找IFileSourceFilter上的pin ...

  5. javaWeb之自动发送邮件生日祝福(ServletContextListener监听)

    在看完本随笔仍然不理解的可以看  javaWeb邮箱发送  :里面有具体的邮箱服务器配置 企业在员工生日当天发送邮箱生日祝福: 一般是用监听器完成:  而合适的监听是ServletContextLis ...

  6. TCP/IP协议三次握手与四次握手流程解析(转)

    一.TCP报文格式   下面是TCP报文格式图:       上图中有几个字段需要重点介绍下:  (1)序号:Seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标 ...

  7. luogu【P1144】最短路计数

    原题入口 这道题 一道有关于最短路的图论问题. 要求从1开始求解最短路的条数. 这个题十分有趣,首先,跑裸的spfa(或者dijkstra)算出从1开始的最短路的长度. 再其次,计数的话,可以用记忆化 ...

  8. 【HDU1711】Number Sequence

    题面 大致题意: 给定两个数列A,B,长度分别为N和M 求出 满足 Ak=B1 ,Ak+1=B2......Ak+M-1=Bm 的最小k值 如果有多个k值输出最小的一个 题解 KMP裸题 直接计算B数 ...

  9. [Luogu2617]Dynamic Rankings（整体二分）

    Luogu 动态区间第K大的整体二分解法 之前学主席树的时候就做了这道题(明明是树套树不是主席树啊),码量挺大而且调了我一个晚上.换成整体二分我半个小时就写完了而且一A. 写起来就是爽. 其实原理很简 ...

  10. Scala编程快速入门系列（一）

    目    录 一.Scala概述 二.Scala数据类型 三.Scala函数 四.Scala集合 五.Scala伴生对象 六.Scala trait 七.Actor 八.隐式转换与隐式参数 九.Sca ...