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

简介:

这个功能为什么要写呢,因为在之前做了一个前端的页面效果,使用JS写的,感觉很累,真的,对于一个文本框长度动态统计,你要写blur,press,down什么的事件,太麻烦了,这时,我想到了knockoutjs,这东西好,为什么,是因为它够简单,够强大,这两点对于程序员来说,就是好!

先来看一下页面的效果

 

当字数达到某个值时,如10个字,这时文本框将不允许你再次输入,这使用了subscribe,而长度与文框关的关联使用了computed(dependentObservable依赖监视器也是可以的),而何时去触发事件使用了valueUpdate属性afterkeydown属性值表示当键盘被按下时触发.

下面看一下实现的原代码

HTML代码

  <input type="text" data-bind="value:count,valueUpdate: 'afterkeydown'" />
  <span data-bind="text:countLen"></span>/10
  <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系列之文本框数符长度动态统计功能,如需转载请自行联系原博主。

目录
相关文章
|
1月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
66 9
|
2月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
62 0
|
2月前
|
Cloud Native
核心系统转型问题之平衡核心架构中的功能性与非功能性需求如何解决
核心系统转型问题之平衡核心架构中的功能性与非功能性需求如何解决
|
4月前
|
前端开发 Java 开发工具
Java医院绩效考核系统源码:关于医院绩效考核系统的技术架构、系统功能、如何选择医院绩效考核管理系统
系统开发环境 开发语言:java 技术架构:B/S架构 开发工具:maven、Visual Studio Code 前端框架:avue 后端框架:springboot、mybaits 数 据 库:MySQL
46 4
Java医院绩效考核系统源码:关于医院绩效考核系统的技术架构、系统功能、如何选择医院绩效考核管理系统
|
3月前
|
负载均衡 监控 Kubernetes
Service Mesh 是一种用于处理服务间通信的基础设施层,它通常与微服务架构一起使用,以提供诸如服务发现、负载均衡、熔断、监控、追踪和安全性等功能。
Service Mesh 是一种用于处理服务间通信的基础设施层,它通常与微服务架构一起使用,以提供诸如服务发现、负载均衡、熔断、监控、追踪和安全性等功能。
|
4月前
|
缓存 NoSQL Java
在 SSM 架构(Spring + SpringMVC + MyBatis)中,可以通过 Spring 的注解式缓存来实现 Redis 缓存功能
【6月更文挑战第18天】在SSM(Spring+SpringMVC+MyBatis)中集成Redis缓存,涉及以下步骤:添加Spring Boot的`spring-boot-starter-data-redis`依赖;配置Redis连接池(如JedisPoolConfig)和连接工厂;在Service层使用`@Cacheable`注解标记缓存方法,指定缓存名和键生成策略;最后,在主配置类启用缓存注解。通过这些步骤,可以利用Spring的注解实现Redis缓存。
70 2
|
3月前
|
负载均衡 Java Linux
黑马头条01,环境搭建,今日头条的介绍,今日头条的功能架构图,技术栈的说明,服务层,nacos(奶靠丝)安装,安装在Linux服务器上环境准备,
黑马头条01,环境搭建,今日头条的介绍,今日头条的功能架构图,技术栈的说明,服务层,nacos(奶靠丝)安装,安装在Linux服务器上环境准备,
|
3月前
|
缓存 Devops 微服务
微服务01好处,随着代码越多耦合度越多,升级维护困难,微服务技术栈,异步通信技术,缓存技术,DevOps技术,搜索技术,单体架构,分布式架构将业务功能进行拆分,部署时费劲,集连失败如何解决
微服务01好处,随着代码越多耦合度越多,升级维护困难,微服务技术栈,异步通信技术,缓存技术,DevOps技术,搜索技术,单体架构,分布式架构将业务功能进行拆分,部署时费劲,集连失败如何解决
|
4月前
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
54 0
|
13天前
|
安全 应用服务中间件 API
微服务分布式系统架构之zookeeper与dubbo-2
微服务分布式系统架构之zookeeper与dubbo-2
下一篇
无影云桌面