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

Knockoutjs是微软mvc4里一个新东西，用这在MVC环境里实现MVVM，小微这次没有大张旗鼓，而是愉愉的为我们开发者嵌入了一个实现MVVM的插件，这下面的几篇文章中，我和大家将一起去探讨它，

它是如何把前台开发者与后台开发者的工作彻底分离的。

对于html标记来说，为它们赋值的方法有很多，你使用JS动态为它赋值也是可能的，但从面向对象的角度来说，意义不大，而当前台开发者了解数据结构后，可以使用Knockoutjs实现面向对象的数据绑定，

HTML元素的面向对象的赋值，今天是个开篇，内容比较简单，只讲一下text,value和attr的数据绑定。

text绑定：你可以为p,span,div,td等标记去加这个text元素

value绑定：你可以为input标记加value元素

attr绑定：你可以为标记动态添加它们的属性，如<a>标签的href,title,<img>标签的src,alt等等

visible绑定：可以动态显示或隐藏指定的标记，true值为显示，false值为隐藏

with绑定：可以绑定一个对象，然后在内部标记里就可以访问对象的属性了

下面的实例中，包含了上面几个概念的用法：

 <p data-bind="with:lines">单价：<input type="text" data-bind='value:productPrice,  valueUpdate: "afterkeydown"' />数量：<input type="text" data-bind='visible:productPrice() > 0,value: productCount, valueUpdate: "afterkeydown"' />小计：<span data-bind="text:total"></span><a data-bind='attr:{href:"/home/add/"+id,title:name}'>添加</a></p><script type="text/ecmascript">var product = function () {self = this;self.id = 1;self.name = "测试产品";self.productPrice = ko.observable(0);self.productCount = ko.observable(1);self.total = ko.computed(function () {return self.productCount() * self.productPrice();});}var products = function () {var self = this;self.lines = ko.observable(new product());}ko.applyBindings(new products());</script>

上面的实例中，当productPrice 为0时，会将productPrice所在的元素隐藏，而这个实例中的数据返回为一个对象lines，这时如果希望访问它内部属性，需要我们使用with关键字。

怎么样，Knockout给我们不一般的感觉吧，它使用前台开发者可以不去关心数据的生产方式，而直接以标记的形式填充即可。

本文转自博客园张占岭（仓储大叔）的博客，原文链接：MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定，如需转载请自行联系原博主。

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

MVVM架构~knockoutjs系列之验证成功提示显示
对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid ...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
MVVM架构~knockoutjs系列之包括区域级联列表的增删改
返回目录这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现"我的银行"模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点, ...
MVVM架构~knockoutjs系列之验证信息自定义输出~再续
返回目录对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是＂整理近可能多的架构方式＂,这样才可以自由的应变 ...
MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength
返回目录为什么要对minLength和maxLength这两个方法进行扩展呢,是因为这样一个需求,在用户注册时,可以由用户自己决定他们输入的字符,中文,英文,数字均可,这样做了之后,使用户的体验更好 ...
MVVM架构~knockoutjs系列之验证信息自定义输出~续
返回目录上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...
MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
返回目录在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...
MVVM架构~knockoutjs实现简单的购物车
返回目录概念相关购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用JS可以实现,但我认为,代码量 ...
《Android构建MVVM》系列(一) 之 MVVM架构快速入门
前言本文属于<Android构建MVVM>系列开篇,共六个篇章,详见目录树. 该系列文章旨在为Android的开发者入门MVVM架构,掌握其基本开发模式. 辅以讲解Android Arc ...

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

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

最新文章

热门文章