MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去探讨它, 它是如何把前台开发者与后台开发者的工作彻底分离的. 对于html标记来说,为它们赋值的方法有很多,你使用JS动态为它赋值也是可能的,但从面向对象的角度来说,意义不大,而当前台开发者了解数据结构后,可以使用Knockoutjs实现面向对象的数据绑定, HTML元素的面向对象的赋值,今天是个开…

MVVM架构~knockoutjs系列之表单添加（验证）与列表操作源码开放

返回目录本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knockoutjs系列目录 MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定 MVVM架构~Knockoutjs系列之对象与对象组合 MVVM架构~Knockoutjs系列之js接收C#数据集合的方式 MVVM架构~Knockoutjs系列之验证机…

MVVM架构~Knockoutjs系列之验证机制的引入

返回目录对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.validation.js,用它来实现对HTML标记的验证, 下面是它在Github上的地址https://github.com/Knockout-Contrib/Knockout-Validation.这个插件的使用很类似MVC自己的验证,如果你自己手动扩展过它的ValidationAttribute…

MVVM架构~Knockoutjs系列之对象与对象组合

返回目录在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在Knockoutjs或者JS里,也存在着对象的概念,今天主要说一下JS里的对象及对象的组合. JS里对象可以使用{}生成,也可以使用function(){}方式生成,而使用function(){}方式我认为更灵活,使用{}方式更正规,我这里总结了一下,也是我的习惯,如果对象只是getter,setter的属性块, 可以使用{}的方式,如果对象比较复杂,由属性,方法组成,这时最好使用func…

MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

返回目录说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码里,只要你踏下心去看,一切就都有了! Knockout.Validation.js是为Knockout插件服务的,它可以为Knockout对象进行验证,就像你使用MVC模型验证一样,而这种绑定的验证方式对于开发人员来说是很容易接受的,也是一种趋势,它在验证过程中,会将出现异常的点记录下来,…

MVVM架构~knockoutjs系列之正则表达式使规则更灵活

返回目录几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验证更强大,那一定要加入正则表达式!一般叫它:Regx 下面我来说一下KnockoutJS里如何加入正则表达式调用方法: self.Property= ko.observable().extend({ required: true, pattern: {…

MVVM架构~knockoutjs系列之级联select

返回目录对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过,今天主要说一下级联的select,事实上,在knockoutjs里,是以数据绑定为中心的,而数据是以面向对象为前提的,而对于级联绑定来说,它也是一种面向对象里关系对象的体现,有了关系对象,我们就可以把级联很容易的开发出来,而不用像之前JS那么麻烦了. 准备数据对象 var Grade_Subject_R = function () { var self = this; self.Grades = [ { 'subject…

MVVM架构~knockoutjs系列之包括区域级联列表的增删改

返回目录这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应该知道一个概念,在knockoutjs里,如果你的select被绑定了optionsValue属性,那么它将存储这个普通的字符,而如果你没有设置optionsValue,那么它存储的是JS对象. Html代码 <script src="/Scripts/areaData.js">…

MVVM架构~knockoutjs系列之验证信息自定义输出

返回目录这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上! 在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从…

MVVM架构~knockoutjs系列之验证信息自定义输出~再续

返回目录对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是＂整理近可能多的架构方式＂,这样才可以自由的应变．对于表单验证,我今天看了新浪的邮箱注册,觉得效果还可以,所以,就写了一个,它利用了knockoutjs里的hasfocus属性,对文本框进行焦点捕捉来实现的．新浪截图说明:表单元素为焦点时,自动提示要输入的信息,当元素失去焦点时,提示用户输出的正确性,这个功能使用了hasfocus属性,下面…

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

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

MVVM架构~knockoutjs系列之一些异常的总结（永久更新）

返回目录 1 关于attr属性的问题这个问题主要出现的IE7和360浏览器,使用attr时,需要为属性名加上单引号,代码如下: <a data-bind="attr:{'href':url,'class':cssname},text:name"></a> 2 computed方法失效这个问题需要将当前对象以参数的形式传入computed方法,代码如下: var self=this; self.realMoney = ko.computed(function…

MVVM架构~knockoutjs系列之数组的$index和$data

返回目录已经写了很多knockoutjs的文章了,今天在review代码时,忽然看到一个问题,在knockout环境下,如何遍历一个简单的数组?对于遍历对象组件的数组来说,很容易,直接foreach:对象名,然后进行属性的绑定即可,而如下数据[10,20,30]这种简单的数组,如何去遍历呢?在阅读knockout官网后,找到了答案,如下实例: <label>博主</label> <div data-bind="text:User.title">&l…

MVVM架构~Knockoutjs系列之js接收C#数据集合的方式

返回目录在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockoutjs只是在前台数据绑定中做了一点调整,它不在依赖于后台具体数据,你完全可以在最后去为它动态绑定数据,一般地,我们会为这种页面添加一个JS文件,用来获取数据,以实现前台开发人员与后台代码开发人员的分离. 从view层拿数据的方式有两种,第一是通过ViewBag,ViewData,TempData,…

MVVM架构~knockoutjs系列之验证成功提示显示

返回目录对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid()方法来实现. 下面给出相关的代码 CSS代码 <style type="text/css"> .validationMessage { background: url("/scripts/Images/l_registWarningIcon01.png&…

MVVM架构~knockoutjs系列之验证信息自定义输出~续

返回目录上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题的表单元素,这在有些场合是不适合的,有时,我们希望它在被失去焦点时才将错误消息显示出来,而不去输入信息时,它保持一种原始状态,如下面的图: 我们可以看到,它在页面被加载后,显示一些友好的提示消息,而当用户没有按着这种规约输入时,它才会提示您错误的消息,如图: 最后输入正确,我们看到的就是: 当输入合…

MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性

返回目录对于一个JS对象来说,如果希望将所有属性进行监视,在之前我们需要一个个对属性添加ko.observable方法,而有了Mapping插件后,它可以帮助我们这件事．在Mapping出现之前 var data={ serverTime:ko.observable( '2010-01-07'), numUsers: ko.observable(), realUsers: ko.observable(), } 我们需要对data对象里所有属性添加ko.observable方法,才可以对它进行…

MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength

返回目录为什么要对minLength和maxLength这两个方法进行扩展呢,是因为这样一个需求,在用户注册时,可以由用户自己决定他们输入的字符,中文,英文,数字均可,这样做了之后,使用户的体验更好,但对于程序来说就有些麻烦了,因为我们的Length方法只针对英文字符和数字而言的原因1:事实上,真实的数据存储里,中文和全角他们占用的是两个字符的空间,所以,我们在验证中文时,应该考虑到这点. 原因2:不说计算机基础知识,但说现实世界里,如果你的用户名由4~10位组成,那么,如果你用Lengt…

MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等

返回目录在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章不同,需要有两个参数,其一是远程方法的签名(JS方法),其二是已知要比较的数据(可能是加密后的密码数据),当用户输入文字后,它将会调用JS方法获取远程数据,以比较原数据与你输入的数据是否匹配. 知识点:以对象作为参数进行传递 ko.validation.js的扩展 //ajax相等验证 kv.rul…

MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在

返回目录在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有了这个想法,我开始尝试它,相信一定可以成功的! 起初在设计时出现了很多问题,如ajax异步问题,延时处理问题,ajax返回值问题等等,经过几次失败后,在总结了相关知识后,终于设计出来了一个不错的扩展,即 ajaxData验证方式. 扩展ko.validation.js代码 kv.rules['aja…

MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象

返回目录一些要说的这是一个很有意思的题目,在KO里,有对象和数组对象两种,但这两种对象对外表现都是一个function,如果希望得到他的值,需要进行函数式调用,如ko_a(),它的结果为一个具体值或者数组或者函数,而ko_a则表示一个KO对象. 今天主要说一下如何在ajax方法里向后台传递对象和数组等参数,一般说来,我们为后台传递的是字符串和数字,而如果希望传递对象,则需要使用$.param这个方法,下面具体用代码说一下. 一些要做的一般后以的代码理想是这样的 public JsonRes…

MVVM架构~knockoutjs与MVC配合，实现列表的增删改功能

返回目录 MVC与MVVM的模型在MVC实例项目中,为我们提供了简单的增删改查功能,而这种功能的实现与具体的Model很有关系,或者说它与后台数据库的关系过于紧密了,而对于开发人员来说当页面布局修改后,也会现时修改它们的Model部分,而对于MVVM思想体系来说,它可以不去修改后台Model,而后采用了一种前台绑定的方式,很好的实现了前台模块与后台Model的解耦! 实例代码本实例主要展现了一个简单的列表操作,包括了添加,删除和修改,在使用knockoutjs实现它之后,使它的用户体验提升了…

MVVM架构~knockoutjs实现简单的购物车

返回目录概念相关购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用JS可以实现,但我认为,代码量挺大的,而使用knockoutjs可以大大减少代码量,而且更重要的是,当前台页面有所调整时,这个JS只需要简单调整,而不需要改后台代码! 代码相关下面看一下实现简单购物车的代码 1 View部分 <table> <thead> <tr> <th>商品</…

MVVM架构~目录

回到占占推荐博客索引 MVVM在概念上是真正将页面与数据逻辑分离的模式,在开发方式上,它是真正将前台代码开发者(JS+HTML)与后台代码开发者分离的模式(asp,asp.net,php,jsp).在介绍它之前我们先来看一下MVP和MVC的定义: MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负责显示.作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Mode…

MVVM架构~使用boxy和knockoutjs实现编辑功能

返回目录这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图…

iOS架构设计系列之解耦的尝试之变异的MVVM

最近一段时间,在思考如何合理的架构一个可扩展性良好的界面编程方式.这一部分的成果做成了一个叫ElementKit的库.目前功能在不断的完善中. 关于iOS的架构,看多了MVVM,VIPER,MVC,MVP,MVCS....的介绍文章.真正实践下来的估计也就是MVC和MVVM了.MVC是系统自带的框架,自然用的多.而MVVM解决了Controller臃肿的问题,再加上神器RAC也被很多团队接纳,甚至有一段时间出现了很多的文章鼓吹该模式如何如何了得.而在设计或者采纳一个架构的时候,我们到底在思考些什…