Knockoutjs 实践入门 (2) 绑定事件

2024-04-26 03:04:54

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 data-bind='click: onClick, disable: hasClickedTooManyTimes'>Click me</button>

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

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

<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

重置

转载于:https://www.cnblogs.com/hbb0b0/p/4477124.html

Knockoutjs 实践入门 (2) 绑定事件相关推荐

envi 文件生成mat_JVM 内存分析工具 MAT 的深度讲解与实践——入门篇
1. MAT 工具简介 MAT(全名:Memory Analyzer Tool),是一款快速便捷且功能强大丰富的 JVM 堆内存离线分析工具.其通过展现 JVM 异常时所记录的运行时堆转储快照(Hea ...
android如何绑定事件,Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
【ROS实践入门（六）消息msg和服务srv文件创建与使用】
[ROS实践学习入门系列(六)消息msg和服务srv文件创建与使用] 本内容经官网实例以及一些参考书总结而成,欢迎留言评论交流- 联系方式:ziyuanw#foxmail.com(#换成@) 一.创建 ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
【js】绑定事件的两种方法
方法一: 为需要绑定事件的标签添加一个属性onclick 代码实现: <input type="button" value="测试按钮" onclick= ...
jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）
一.bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数. 也可以同时给一个元素绑定多个事件,我们来看一下例子: <!DOCTYPE html> < ...
这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
jq父级绑定事件的意义_jq——事件
$(document),$(body) 加载事件: $(document).ready(fn) $(document).ready(function(){ alert("这是加载事件&quo ...
js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法只支持IE678,不兼容其他浏览器 addEv ...

最新文章

热门文章