MVVM架构~knockoutjs系列之文本框数符长度动态统计功能
这个功能为什么要写呢,因为在之前做了一个前端的页面效果,使用JS写的,感觉很累,真的,对于一个文本框长度动态统计,你要写blur,press,down什么的事件,太麻烦了,这时,我想到了knockoutjs,这东西好,为什么,是因为它够简单,够强大,这两点对于程序员来说,就是好!
先来看一下页面的效果
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALUAAAAqCAIAAAB6AY1oAAACcUlEQVR4nO2ZzXXrIBBGpwuVoQVFuAo2LNKBimBDCamBDRWkBW3ogC7IAiHzp7H9Yj/FOd9d5TgCdPJdDwOhCMAxdPYLgF8N/AAc8ANwwA/AAT8AB/wAHPADcNAHeAfO9OOstcGdwA/AAT8AB/wAHPADcMAPwAE/AAf8ABx1RkHNE9Uo7crnjRRCmvSzt4aIjPXlA06rPFRUv+iAH28Ak1FY3dRm7AWRsT6sbveo9MNbs2thpJhmFY6XHvuRpm6ki3lGIiKa3MpMy5GMvmku2GH8KEtFwltTRx7UPBVRBjVPe70Jq5vYKA/rh9Oq98Nb05SyfyWo+QI/7uTYDy+6dI0UdUaNH82QrdgcLf2wH8xcjwA/HuAoo65UDOtB5Uf3QGNPC+eHlLLYvaq2yFif1COa3Poltv0ifSKsNUSUXr1ohaiucqUfaWC7U4LEQUbVTpFwWjXbzQv9SCuF1c1Z0qZ+hNVdpIkxOr3kJcMilxC9zG/5ZW0YbEyVH/u0YXXLc/avP8Vxj9j0cMOwX76/pMhjHOwvKeag9Sfz3rtG3cArqe3t3AcxHvgx7ExHXf/N/pQ7KNz2o0y37z+8NYvWn8XyqX6I66r+spWfUqPKD6e1z7NBkZ5RRoPvfdeZJtqi4rQqz7f8H5zxY5m3hmMrR/lk2xxNr9UltxHXRsRXo7ZrnHy+HX+C/qOnz8hp1d1btGeZ8v6juUbbQ7n5bfz5/ZjX6BhezD0ZjYx5Aj/yw0iBa67/wB0ZDc4yTwH3628A/j8HOOAH4IAfgAN+AA74ATjgB+A42Q/w+znNj7MWBm8B/AAc8ANwwA/AAT8AB/wAHN+0yYnFgZnZAAAAAABJRU5ErkJggg==" alt="" />
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA1CAIAAACsmLLmAAADYklEQVR4nO2cz5WkIBCHycIwPBBER+HFw2ZgEFwIoWPgQgSTghcyIAv2oGDxp+3Z7WkHmt93mDdP0RXrswpq3lvmAKgA9tsPAIBzEBFUAkQEVQARQRVARFAFEBFUAUQEVQARQRVARFAFEBFUAUQEVcD+gBb4bU/eDuthkq3TQ4wgYgP0ECOI2AA9xAgiNkAPMYKIDdBDjCBiA/QQI4jYAD3EqFURGXvYij851SjFGGkxMzbo1dKDcuKMMcbYMM42vcJwxqQyZCQ30QA7j8N2OZ/kDz7/d/hYEVmJCx/wJ0liZJT0E4pE1GL2/tl5HBKZjJKbeVrM/vJIRDlxf4nhjM1Cv21CBcoi2lUP5Ouh+G8u/Ra/j3+PvHB3QnhfxccoWhUUfDqyLR4kC8OjKEQJL2gXkBOnbtlVD2SAXfVA7kacvoiHGVGLOTfAKPlDH4qdx9uJiFrM/ussj4SIiYjnYmXWpuONktS83ON3888iFvPTv3Mu4nZ2W7IMQgi92mKpTcpu8vNTS7MncitTJzqbZ7hExGRAcvYCzkScpokUx2Ml648YvtfoL76X2u0IV0qG9TJZkdAim4hoeHzn2zh/KSmV0UIodc+XAU8zYhiQ/9IcL4to53FIMkhLIm7F0a569I+YZES76tsknXNaLGHOy7RYZya/Uv5SyhZqeiRiuK1d9SL0JqIQwjq7TMv9uLl/6FIJdn2LeFKai1a1WJo3t5wrlOa9hgpxPw5l0w6+ZhcebHsgui4UPpXmrQSI6Jx7ulkJYpHt8MHTzcrFHZznIlKN8jWiUXIR4k5q7pYR+TFJc/M9BeJrJKIWwvi78T3Fzo92RdSn4r6kVxGdnDht3/gXmA7byPIF7fhETl/DiYjLuC8K92mEZmmctI986Zd6x2LRRFftrSnSBisciTuu+T93JiI9mPj3SZsV+rril3as48NnnNRcF6/aaXyzlfqlvN7QNuLCzuejcvz9AS3yQoxoaqyal0Qs/ZnoXZyktHDqJEE2zX/HKOsm1kurf+Lrih5iBBEboIcYQcQG6CFGELEBeogRRGyAHmIEERughxhBxAboIUb4L0fa4Lc9eTvNN3vBZwARQRVARFAFEBFUAUQEVQARQRVARFAFEBFUAUQEVQARQRVARFAFEBFUAUQEVfAXhcDk8om42QwAAAAASUVORK5CYII=" alt="" />
当字数达到某个值时,如10个字,这时文本框将不允许你再次输入,这使用了subscribe,而长度与文框关的关联使用了computed(dependentObservable依赖监视器也是可以的),而何时去触发事件使用了valueUpdate属性afterkeydown属性值表示当键盘被按下时触发.
下面看一下实现的原代码
HTML代码
<input type="text" data-bind="value:count,valueUpdate: 'afterkeydown'" />
<span data-bind="text:countLen"></span>/
<span style="color: red;" data-bind="validationMessage:count"></span>
JS代码
/*computed valueUpdate等属性的学习*/
self.count = ko.observable().extend({
maxLength: { params: 10, message: "最大长度为10" },
required: {
params: true,
message: "请输入字符..."
}
});
self.count.subscribe(function (o) {//实现当大于某个长度时,只绑定指定长度的字符
if (o.length > 10)
self.count(o.substr(0, 10));
}); self.countLen = ko.computed(function () {
return self.count() ? self.count().trim().length : 0;
});
MVVM架构~knockoutjs系列之文本框数符长度动态统计功能的更多相关文章
- MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放
返回目录 本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knoc ...
- MVVM架构~knockoutjs系列之验证信息自定义输出~再续
返回目录 对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是"整理近可能多的架构方式",这样才可以自由的应变 ...
- MVVM架构~Knockoutjs系列之对象与对象组合
返回目录 在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在Knockoutjs或者JS里,也存在着对象的概念,今天主要说一下JS里的对象及对象的组合. ...
- MVVM架构~Knockoutjs系列之验证机制的引入
返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...
- MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...
- MVVM架构~knockoutjs系列之正则表达式使规则更灵活
返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...
- MVVM架构~knockoutjs系列之包括区域级联列表的增删改
返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应 ...
- MVVM架构~Knockoutjs系列之js接收C#数据集合的方式
返回目录 在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockou ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
随机推荐
- HTTP中的POST、GET区别
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- 【转】gtk+多线程的程序实例
#include <gtk/gtk.h> gint test() { while(1) { gdk_threads_enter(); g_printf("hello\n" ...
- MySQL Table is marked as crashed 解决方法
MYSQL数据表出现问题,提示: ERROR 144 (HY000): Table './dpt/dpt_production' is marked as crashed and last (auto ...
- AKI
KDIGO 2012定义:尿量<0.5ml/kg/h 6h+:scr上升50%+ 7d-:scr上升26.5 2d- 但面对录入窗口,又想不出说什么了,继续看aki?刚才想的是什么呢?入冬,好像 ...
- C#与Swift异步操作的差异
作为一个从C#转到Swift的小菜鸡...最近做一个简单的请求API解析Json数据的小程序上碰到一堆小问题.尤其是在异步请求的时候,用惯了C#的async/await写法,在写Swift的时候也按着 ...
- 第五章GPIO接口
5.1 GPIO硬件介绍 可以不通过他们输出高低电平或者通过它们读入应交的状态 S3C2410有117个I/O端口,分为A~H共8组:GPA.GPB....GPH S3C2440有130个I/O端口, ...
- C++中的注解理解
SAL: the Microsoft Source Code Annotation Language. SAL: the Microsoft Source Code Annotation Langua ...
- css各项水平居中
当被设置元素为块状元素时用text-align:center就不起作用了,这也分两种情况,定宽块状元素和不定宽块状元素. 一.定宽块状元素:快状元素的宽度width为固定值,之后我们可以将左右marg ...
- linux的一些小问题
1.需要使用root权限时提示xxx is not sudoers.... 1).root用户下输入visudo 2).在打开的文件中找到 root ALL=(ALL) ALL,以xxx为用户名,添加 ...
- JAVA学习博客---2015-6
JAVA核心技术卷一第一遍看得差不多了,应该是五月初开始看的,用了两个月的中午时间看完的,一共七百多页,接下来还是需要再看一遍,不懂的还是有很多. JAVA和C++一样是面向对象OOP的语言,不同于命 ...