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这种开发语言来说,它开发的插件的使用方法都 ...
随机推荐
- HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head> <!-- 以下 ...
- SQLServer : 几个特殊函数(RAND,CHECKSUM, NEWID)
这一篇我们来捋捋在T-SQL中可能会用到的几个特殊的函数 1. 随机数: RAND 返回从 0 到 1 之间的随机 float 值. 语法: RAND ( [ seed ] ) seed 提供种子值的 ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- terminal崩溃打不开的一种原因以及ubuntu下matlab权限不够的解决办法
为了解决点击matlab图标闪退的问题,我往.bashrc添加了如下命令: source /usr/local/MATLAB/R2015b/bin/matlab 结果导致打开新的terminal闪退. ...
- 一些比较常用的Linux命令
我有一些是我是参考别人的,忘记是谁了,在这里要感谢一下ta. #命令格式就是就是由命令+空格+一些命令用法的选项(可以选择多个用法)+空格+/+目录名或者文件名,有些是直接打命令就可以了,比如ls - ...
- grep及正则表达式
文本搜索工具:grep,egrep,fgrep GREP介绍 grep: 根据模式条件搜索文本,并将符合模式的文本行显示出来. 过滤条件:文本字符和正则表达式的元字符组合而成匹配条件 以正则表达式的 ...
- [fortify] 变量覆盖漏洞
一.全局变量覆盖当register_global=ON时,变量来源可能是各个不同的地方,比如页面的表单,Cookie等. <?php echo "Register_globals: & ...
- 【动态规划】bzoj1642 [Usaco2007 Nov]Milking Time 挤奶时间
区间按左端点排序,dp. #include<cstdio> #include<algorithm> using namespace std; #define N 1001 st ...
- iTunes Connect 开发者上手经验(转)
原文:http://www.cnblogs.com/zhw511006/archive/2013/01/15/2860945.html iOS Developer通常需要用到 developer.ap ...
- Openlayers+Geoserver(一):项目介绍以及地图加载
项目验收完,趁着事情不是很多,对这个项目进行梳理.我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题.另一个是数据的校验,就是 ...