Knockoutjs 绑定事件

Knockoutjs 不仅支持UI 元素的属性绑定到model的属性，还支持UI 元素的事件绑定model的事件。

需求：

l  click me button 每单击一次，计数器累加一次，并且把计数器次数显示到div中

l  click me button 最大可单击3次，3次过后click me button 不能使用;单击次数达到3次时，显示提示信息，并且显示reset button

l  reset button 单击后click me button 计数器清零,click me button 可用；提示信息与reset

button 消失

代码实现

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="js/knockout-3.3.0.debug.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div>

<!--button  click 事件绑定model的onclick方法 -->

<!--button  disable属性绑定hasClickedTooManyTimes属性 -->

<button data-bind='click: onClick, disable: hasClickedTooManyTimes'>Click me</button>

<!--div  visible hasClickedTooManyTimes -->

<div data-bind='visible: hasClickedTooManyTimes'>

That's too many clicks! Please stop before you wear out your fingers.

<!--button  click绑定resetClicks -->

<button data-bind='click: resetClicks'>Reset clicks</button>

</div>

</form>

<script type="text/javascript">

var model = function () {

//计数器

this.numberOfClicks = ko.observable(0);

//onclick方法

this.onClick = function () {

this.numberOfClicks(this.numberOfClicks() + 1);

};

//计数器重置

this.resetClicks = function () {

this.numberOfClicks(0);

};

//hasClickedTooManyTimes 属性

this.hasClickedTooManyTimes = ko.pureComputed(function () {

return this.numberOfClicks() >= 3;

}, this);

};

ko.applyBindings(new model());

</script>

</body>

</html>

运行结果

第一次click

第三次click

重置

Knockoutjs 实践入门 (2) 绑定事件的更多相关文章

  1. Knockoutjs 实践入门 (3) 绑定数组

    <form id="form1" runat="server">        <div>            <!--text ...

  2. Knockoutjs 实践入门 (1) 属性绑定

    1  是什么? 使用MVVM模式的简单,动态的Javascript UI.           2   优点  声明式绑定  UI 自动更新 依赖追踪  模板化          3 如何使用   & ...

  3. 学习之js绑定事件

    由于ie中绑定事件的bug,所以产生了用原生的实践操作来模拟事件绑定的方法,跟着李炎恢学的一招. function addEvent(obj, type, fn){ if(obj.addEventLi ...

  4. jQuery里面的普通绑定事件和on委托事件

    以click事件为例: 普通绑定事件:$('.btn1').click(function(){}绑定 on绑定事件:$(document).on('click','.btn2',function(){ ...

  5. WCF宿主实践入门

    本篇属于WCF实践入门,由于博主本人水平有限,没有理论上的介绍,仅仅从其几种不同的宿主方式分别介绍WCF的使用. WCF有多种宿主方式:1.自托管宿主,2.windows service宿主,3.II ...

  6. Slider绑定事件，初始化NullPointerException错误

    最近刚刚接触Silverlight,随便在网上找了一个入门的博文http://www.cnblogs.com/Terrylee/archive/2008/03/07/Silverlight2-step ...

  7. 【无线安全实践入门】破解WiFi密码的多个方法

    本文希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. 文中可能存在错误操作或错误理解,望大家不吝指正. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的 ...

  8. JQ绑定事件的叠加和解决，index()方法的坑

    JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...

  9. 极简 Node.js 入门 - 2.2 事件

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

随机推荐

  1. Oracle 11G在用EXP 导出时，空表不能导出解决

    Oracle 11G在用EXP 导出时,空表不能导出解决 (转)(.http://wanwentao.blog.51cto.com/2406488/545154 11G中有个新特性,当表无数据时,不分 ...

  2. Unbunt vi 编辑器键盘按键不正确的一次经历与解决方案

    在 VMWare 上安装了 Ubuntu Server 14.04.1(这个默认没有安装 vim ) 我在配置网卡的时候,编辑得很心碎.键盘输入和平常vi的响应完全不一样.又不能用 SecureCRT ...

  3. dddddd

    (function(window){ var com = function(box){ this.box = document.querySelector(box); } window.zhangle ...

  4. AngularJs自定义指令详解（8） - priority

    priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

  5. 新手看Mockplus

    如今是一个快节奏的社会,每一天都会有无数的软件发布,每一款软件的制作过程不可避免的需要使用原型设计工具.而Mockplus就是一款原型设计软件,可以用于移动端,PC端以及WEB的原型设计.它也符合如今 ...

  6. Springmvc mybatis

    http://www.icoolxue.com/album/show/216 07

  7. 了解Hadoop和大数据

    1. 场景: 现在人产生数据越来越快,机器则更快,所以需要另外的一种处理数据的方法.   硬盘容量增加,但是性能没跟上,解决办法是将数据分到多块硬盘,然后同时读取. 问题:     硬件问题 -- 复 ...

  8. Linux 下curl模拟Http 的get or post请求

    一.get请求 curl "http://www.baidu.com"  如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "http:// ...

  9. 解决 Oracle exp导出表数据时空表不能导出的问题

    一.不能导出空表的原因 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参 ...

  10. flex中通过代码获取supermap的token

    最近工作中需要使用代码来获取supermap服务启动安全访问限制以后的token值,经过一番尝试,最终成功获取到,记录下里,以供翻阅 //get token public function getTo ...