Knockoutjs 实践入门 (2) 绑定事件
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'> </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) 绑定事件的更多相关文章
- Knockoutjs 实践入门 (3) 绑定数组
<form id="form1" runat="server"> <div> <!--text ...
- Knockoutjs 实践入门 (1) 属性绑定
1 是什么? 使用MVVM模式的简单,动态的Javascript UI. 2 优点 声明式绑定 UI 自动更新 依赖追踪 模板化 3 如何使用 & ...
- 学习之js绑定事件
由于ie中绑定事件的bug,所以产生了用原生的实践操作来模拟事件绑定的方法,跟着李炎恢学的一招. function addEvent(obj, type, fn){ if(obj.addEventLi ...
- jQuery里面的普通绑定事件和on委托事件
以click事件为例: 普通绑定事件:$('.btn1').click(function(){}绑定 on绑定事件:$(document).on('click','.btn2',function(){ ...
- WCF宿主实践入门
本篇属于WCF实践入门,由于博主本人水平有限,没有理论上的介绍,仅仅从其几种不同的宿主方式分别介绍WCF的使用. WCF有多种宿主方式:1.自托管宿主,2.windows service宿主,3.II ...
- Slider绑定事件，初始化NullPointerException错误
最近刚刚接触Silverlight,随便在网上找了一个入门的博文http://www.cnblogs.com/Terrylee/archive/2008/03/07/Silverlight2-step ...
- 【无线安全实践入门】破解WiFi密码的多个方法
本文希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. 文中可能存在错误操作或错误理解,望大家不吝指正. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的 ...
- JQ绑定事件的叠加和解决，index()方法的坑
JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...
- 极简 Node.js 入门 - 2.2 事件
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
随机推荐
- phpstorm设置
phpstorm版本为10.0.3,设置自动换行如下: 快捷方式: 打开新的文件:ctrl+shift+N 格式化:ctrl+alt+L 全局搜索:ctrl+shift+F 更换默认快捷键如下,其实右 ...
- 3.jenkins 权限认证与密码设置
1.前言 在用Jenkins过程中忘记管理员密码和开启权限认证后管理员帐号没有任何权限是经常遇到的情况,最近有好多群友被这个问题困扰.但Jenkins没有提供密码找回的功能,经过一翻探索找到了一种变相 ...
- c++ chap1 to chap 3
#ifndef MAIN_H_INCLUDED#define MAIN_H_INCLUDED struct Course{ int id; std::string name;}; const int ...
- 【章老师的课程】Black Box Testing
本周我们学习了黑盒测试,这是一种常用的软件测试方法,它将被测软件看作一个打不开的黑盒,主要根据功能需求设计测试用例,进行测试.本章主要介绍几种常用的黑盒测试方法和黑盒测试工具,并通过实例介绍各种方法的 ...
- Spark难道比oracle性能还差？百万级数据测试性能
本人对大数据方面也是刚刚研究,由于工作需要在实时查询与统计的性能方面要深入学习.现测试性能如下: 环境:VirtualBox host-only ubuntu版本: Linux master 4 ...
- 升级到iOS9之后的相关适配
iOS9AdaptationTips(iOS9开发学习交流群:458884057) iOS9适配系列教程[中文在页面下方]转自@iOS程序犭袁 (截至2015年9月26日共有10篇,后续还将持续更新. ...
- ubuntu 安装JAVA jdk的两种方法：
ubuntu 安装jdk 的两种方式: 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgrade 方式方便获得jdk的升级 使用pp ...
- 学习maven的使用，看到一篇很实用的入门教程(菜鸟级入门)
一.前言 早就知道maven 在java 项目的管理方面名声显赫,于是就想着学习掌握之,于是查阅了大量文档.发现这些文档的作者都是java 的大腕,大多都是站在掌握了一定maven 基 ...
- jsp_内置对象_request
request内置对象是使用最多的一个对象,其主要作用是接收客户端发送来的请求信息.如请求的参数.发送的头信息等都属于客户端发送来的信息.request是javax.servlet.http.Http ...
- jsp页面格式时间yy-mm-dd
这个问题把我花了1小时都没弄出来 各种报错 还是最后同学告知才知道的. 导入 :<%@ taglib uri="http://java.sun.com/jsp/jstl/func ...