MVVM架构~knockoutjs系列之文本框数符长度动态统计功能

时间:2023-03-09 05:37:29
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;
});

返回目录