点击加一：

<!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. 笔记︱决策树族——梯度提升树(GBDT）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本笔记来源于CDA DSC,L2-R语言课程所 ...

  2. 嵌入式 视频编码（H264）

    这几天在编写视频录制模块,所以,闲暇之余,又粗粗的整理了一下,主要是API,以备不时之用    摄像头获取的模拟信号通过经芯片处理(我们使用的是CX25825),将模拟信号转成数字信号,产生标准的IT ...

  3. jQuery提示parsererror错误解决办法

    jquery来处理ajax,用到了json.但是很诧异,jquery的ajax回调时一直调用了error函数(一直提示parsererror异常),success函数一次没执行过 $.ajax({ t ...

  4. freemarker报错之十一

    1.错误描述 六月 03, 2014 11:00:35 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  5. 获取JSON对象的属性名称

    1.问题背景 一个json对象,是以键值对组成,通过循环json对象,获取json对象中的属性名称 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. windows驱动之WDF---CharSample

    驱动程序部分: NTSTATUS DriverEntry( IN PDRIVER_OBJECT DriverObject, IN PUNICODE_STRING RegistryPath ) /*++ ...

  7. sql中的IFNULL函数的应用

    select r.status=1 and IFNULL(r.channel_code,'') != 'crm' 这种查询方式的意思就是说如果r.channel_code为空则设置为空字符串,自然而然 ...

  8. Keras官方中文文档：Keras安装和配置指南(Linux)

    关于计算机的硬件配置说明 推荐配置 如果您是高校学生或者高级研究人员,并且实验室或者个人资金充沛,建议您采用如下配置: 主板:X299型号或Z270型号 CPU: i7-6950X或i7-7700K ...

  9. 【BZOJ1257】余数之和（数论分块，暴力）

    [BZOJ1257]余数之和(数论分块,暴力) 题解 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的 ...

  10. Session和Cookie总结

    一.Session和Cookie 1.Cookie 1.cookie创建于服务器,保存于浏览器,保存了特定网站操作记录和资料凭证的信息. 2.未设置cookie期限的时候,默认是关闭浏览器后cooki ...