点击加一：

<!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. 最新的Android版本和API Level的对应关系表

    在项目开发过程中,经常会用到API Level和Android平台版本的对照,来进行一些方法的调用,现在就把对照表贴出来,供开发人员参考,并且方便自己查阅. Platform Version API ...

  2. php学习笔记upset函数。

    如果在函数中我们不希望再使用某个变量.可以使用unset()销毁函数, ②在php函数中,我们可以给某些参数赋一个默认初值. ③可以传一个默认的参数. ④php在传递变量的时候,默认是传递值传递,如果 ...

  3. Srtuts2实现登录界面（不连接数据库）报错（三）

    二月 28, 2014 11:41:20 下午 org.apache.catalina.core.AprLifecycleListener init 严重: An incompatible versi ...

  4. 通过地址获得经纬度(百度Geocoding API)

    1.什么是Geocoding? Geocoding API 是一类简单的HTTP接口,用于提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务,用户可以使用C# .C++.Java等开发语言发送HT ...

  5. Rweibo , wordcloud

    利用Rweibo ,wordcloud做词云 #导入需要的包,不存在则下载 require(Rweibo) #必须先调用rJava不然Rwordseg 无法使用 library(rJava) requ ...

  6. java.sql.SQLException: ORA-01841

    1.错误描述 body = (null) clientId = "DB719904-1E0C-35DC-725D-86ABCF2B6EEC" correlationId = &qu ...

  7. 利用scrapy模拟登录知乎

    闲来无事,写一个模拟登录知乎的小demo. 分析网页发现:登录需要的手机号,密码,_xsrf参数,验证码 实现思路: 1.获取验证码 2.获取_xsrf 参数 3.携带参数,请求登录 验证码url : ...

  8. 启动就加载（一）----注解方式实现的。static项目启动的时候就加载进来（一般用于常用参数）

    一,案例 1.1,图片分析 1.2,代码 1.2.1,编写加载系统参数的servlet public class SysInitServlet extends HttpServlet { public ...

  9. MvcHtmlString解决MVC中从后台返回HTML代码被编码问题

    (1) 要得到的效果 <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" id= ...

  10. RestSharp 一个.NET(C#)的HTTP辅助类组件

    互联网上关于.NET(C#)的HTTP相关的辅助类还是比较多的,这里再为大家推荐一个.NET的HTTP辅助类,它叫RestSharp.RestSharp是一个轻量的,不依赖任何第三方的组件或者类库的H ...