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. discuz！安装遇到问题的解决方案

    正常的安装步骤好多地方都有写过了,我安装的时候遇到问题百度翻了个遍也没有找到,现在问题已经解决了,发出了分享一下! 进入第三步创建数据库的时候提示:由于目标计算机积极拒绝,无法连接. 打开phpmya ...

  2. Myeclipse 安装离线adt的方法 （）

    方法一: 1.下载最新的adt插件ADT-10.0.1.zip (在MyEclipse 10.5 上安装的ADT插件是ADT 20.0.3离线包下载地址: http://dl.cr173.com//s ...

  3. django+nginx+xshell简易日志查询,接上<关于《rsyslog+mysql+loganalyzer搭建日志服务器<个人笔记>》的反思>

    纠正一下之前在<关于<rsyslog+mysql+loganalyzer搭建日志服务器<个人笔记>>的反思>中说到的PHP+MySQL太慢,这里只是说我技术不好,没 ...

  4. <停车卫> 产品需求说明书 version 2.0

    <停车卫> 产品需求说明书 文档版本号: Version 2.0 文档编号: xxxx 文档密级: 归属部门/项目: 产品名: 停车卫 子系统名: 编写人: kina 编写日期: 2015 ...

  5. C# 解析 Json

    C# 解析 json JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的 ...

  6. IIS配置excel 权限

    http://www.cnblogs.com/zhuxiaohui/archive/2013/10/16/3371637.html

  7. Process类

    public bool Process.Start () 启动(或重用)此 Process 组件的 StartInfo 属性指定的进程资源,并将其与该组件关联. public bool Process ...

  8. Android视图绘制流程完全解析，带你一步步深入了解View(二)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/16330267 在上一篇文章中,我带着大家一起剖析了一下LayoutInflater ...

  9. 易学PHP——WAMP环境搭建

    安装前的准备 查看本机的类型(x86/x64,即 32 位还是 64 位) 安装好 VC9/VC11/VC14 运行库(需要按照本机的类型选择安装) 创建好一个安装路径用于安装整套 amp 环境(我使 ...

  10. elasticsearch-查询

    使用如下语句创建一个名字为:user_document,别名为user的索引 PUT:http://localhost:9200/user_document { "settings" ...