点击加一：

<!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. HI3531的nand flash测试

    void NAND_Init() {    *(unsigned int *)(0x20030000 + 0xd0) = 7; delay_x(0X5000);    *(unsigned int * ...

  2. dojo中的xhrPost请求（JSON）

    dojo中的xhrPost请求 dojo.xhrPost({ url:"../area.action", content:{ areaCode:areaCode }, handle ...

  3. linux下面的fd限制

    如果不考虑内存大小的限制,在linux下面,fd (即file descriptor)的数量来自2个限制(阈值).其一:是操作系统的限制.这个限制主要是在linux内核中,我们知道,用户程序的fope ...

  4. mysql学习笔记02 CRUD操作

    添加数据insert into 表名(字段列表) values(对应字段的列表值) 查询数据 select *from 表名 where 条件select *from 表名 where 1条件 1表示 ...

  5. am335x在ubuntu下使用StarterWare编写裸机程序并在CCS中用Jlink调试

    StarterWare在AM335X上的烧录运行 步骤:1.下载安装StarterWare,我们团购的SK需要02.00.00.07版本.最近外网访问慢,我上传到论坛.2.找一张miniSD卡,不需要 ...

  6. 【译】gRPC负载均衡

    原文地址:https://github.com/grpc/grpc/blob/master/doc/load-balancing.md gRPC负载均衡 范围 本文档解释了gPRC的负载均衡的设计. ...

  7. select选中获取索引三种写法

    $('#someId').prop('selectedIndex'); $('option:selected', '#someId').index(); $('#someId option').ind ...

  8. js运算符单竖杠“|”的用法和作用及js数据处理

    js运算符单竖杠“|”的作用 很多朋友都对双竖杠“||”,了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用技巧,js小知识 , 这篇文章里面,js ...

  9. Python Cookbook(第3版)中文版：15.19 从C语言中读取类文件对象

    15.19 从C语言中读取类文件对象¶ 问题¶ 你要写C扩展来读取来自任何Python类文件对象中的数据(比如普通文件.StringIO对象等). 解决方案¶ 要读取一个类文件对象的数据,你需要重复调 ...

  10. 【BZOJ4555】求和（第二类斯特林数，组合数学，NTT）

    [BZOJ4555]求和(第二类斯特林数,组合数学,NTT) 题面 BZOJ 题解 推推柿子 \[\sum_{i=0}^n\sum_{j=0}^iS(i,j)·j!·2^j\] \[=\sum_{i= ...