点击加一：

<!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. mysql常用基础操作语法（五）--对数据的简单条件查询【命令行模式】

    1.单条件查询:select 字段名 from tablename where 条件: 2.简单多条件查询,使用&&或者between and等: 3.is null和is not n ...

  2. Excel 2010高级应用-面积图（三）

    Excel 2010高级应用-面积图(三) 操作过程如下: 1.新建Excel空白文档,重新命名为面积图 2.单击"插入",找到面积图图样 3.选择其中一种类型的面积图,单击并在空 ...

  3. Caused by: java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be ope

    1.错误描述 java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.tes ...

  4. Java中的List转换成JSON报错（一）

    1.错误描述 Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/lang/ ...

  5. FFMPEG:压缩之H264编码（YUV420P->H264）

    720*576@25hz,550帧的yuv420p数据,编码时间13.3秒. void CTest0Dlg::OnButton5() { // TODO: Add your control notif ...

  6. 泛型集合、datatable常用数据类型转换Json帮助类

    泛型集合.datatable常用数据类型转换Json帮助类 using System; using System.Data; using System.Configuration; using Sys ...

  7. directX--关于CSource和CSourceStream (谁调用了fillbuffer)

    CSourceStream类,是CSource类的OutputPin[source.h/source.cpp]派生自CAMThread和CBaseOutputPinl         成员变量: CS ...

  8. hdu5988 Coding Contest

    首先这是个费用流,用log转乘法为加法,外加模板的修改,需加eps 下面是废话,最好别看 闲来无事(鼓起勇气)写这篇博客 这是个自带影像回访的题目 青岛的炼铜之旅,大学的acm生涯就这样结束了.或许还 ...

  9. 从“跳一跳”来看微信小程序的未来

    从“跳一跳”来看微信小程序的未来   相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...

  10. [ZJOI2007]时态同步

    题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两个节点 ...