KnockOutJS学习系列----(一)

原文地址:http://www.cnblogs.com/n-pei/archive/2011/12/23/2299217.html

好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西。

也很抱歉,突然看到好多的短消息,真不知道该如何给大家回复。。。

最近试着晚上抽时间写一些knockoutjs和mvc的文章。这里先写一点knockoutjs的东西。

关于knockoutjs到底是什么,如果你不知道,可以看看几个月前我写的一篇文章介绍它。

ASP.NET MVC框架下使用MVVM模式

我也是之前安装了Visual Studio 11,今天的例子就是在VS11上去做的,顺便看看VS11对Javascript有什么新的特性。

1. 如何使用Knockoutjs:

在knockoutjs中,每个HTML的DOM对象都是通过data-bind属性来绑定数据的。首先你需要把knockoutjs添加到页面中或者模板中。因为MVC4模板里已经默认添加了knockoutjs,所以我就直接用啦。

开始使用ko(knockoutjs的缩写),首先你需要定义一个viewmodel;

接下来需要做的是,把viewmodel的firstName和lastName两个属性绑定到HTML的DOM对象。

使用span来绑定:

使用input来绑定:

运行结果:

因为ko是MVVM模式,所以当任何绑定了某个属性的地方修改该属性值时,其它地方也会随之变化。就像上面的输入框”First name”变化为”nic”时,那个span中得”nicholas”也会变为”nic”。

2. 简单的列表绑定:

对于列表的绑定,基本上是使用table。这里我们看如何使用ko把一个Array绑定到一个table中。因为多条数据就最好是使用模板了,所以我们结合jquery的模板插件来使用ko。

首先我们需要定义一个数组,然后定义一个ko的数组。

Ko有自己的数据定义,是availableArray;所以我们需要使用它的函数把我们定义好的数组给传进去,生成availableArray。

第二步是去定义一个jquery的模板,定义一个table,并把viewModel的数据绑定到模板中。

这里tbody的data-bind就是直接绑定template啦,对应的需要给出绑定的模板Id,以及需要传入到模板的数据源。

运行看结果:

下次准备使用jquery模板和ko写一个比较好点的data grid.并从后台异步传输数据。

时间: 2024-08-19 00:21:35

KnockOutJS学习系列----(一)的相关文章

Android学习系列(17)--App列表之圆角ListView(续)

http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html 本来这篇文章想并到上篇Android学习系列(16)--App列表之圆角ListView中的,但是若是如此就让大家错过一篇新的好的文章,着实可惜.上篇中我们使用shape,corners,gradient实现了一个渐变的圆角效果,但是在完文之后的实践中,我发现有时效果不甚满意,选中和放手的事件监听没有去正确的判断,然后渐变效果也比较单一,性能也觉得不是很快

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

Caffe学习系列——工具篇:神经网络模型结构可视化

Caffe学习系列--工具篇:神经网络模型结构可视化 在Caffe中,目前有两种可视化prototxt格式网络结构的方法: 使用Netscope在线可视化 使用Caffe提供的draw_net.py 本文将就这两种方法加以介绍 1. Netscope:支持Caffe的神经网络结构在线可视化工具 Netscope是个支持prototxt格式描述的神经网络结构的在线可视工具,网址:  http://ethereon.github.io/netscope/quickstart.html  它可以用来可

Intelli IDEA学习系列之快捷键篇

Intelli IDEA学习系列之快捷键篇 IDEA简介: IDEA 全称IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.Ant.JUnit.CVS整合.代码审查. 创新的GUI设计等方面的功能可以说是超常的.IDEA是JetBrains公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主. 在学习过程中会慢慢补充..... [1.查找] 1

Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问

本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这部分内容需要以下Jar包支持 mysql-connector:MySQL数据库连接驱动,架起服务端与数据库沟通的桥梁: MyBatis:一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架: log4j:Apache的开源项目,一个功能强大的日志组件,提供方便的日志记录: 修改后的pom.xm

Oracle学习系列4

Oracle学习系列4 ************************************************************************************ 数据库更新操作: 分类: 查询操作:select 更新操作:insert ,update , delete 为了保存原始的emp表的信息,在进行增删改之前备份词表: create table emp_bak as select * from emp ; //将表emp结构和数据完整的复制出来 添加数据:

Oracle学习系列3

Oracle学习系列3 ************************************************************************************ 多表查询: 1,SQL1999语法对多表查询的支持 2,分组统计及统计函数的使用 3,子查询,并结合多表查询,分组统计做复杂查询 4,数据库的更新操作 5,事务处理和数据库死锁 ****************************************************************

Unity-Animator学习系列总索引

花了不少时间完成了这篇Unity Animator学习系列文章,其中API部分很多都是亲测.希望能对路过的博友有所帮助 相关参考文档 Unity Animator官方组件文档 Unity Animator官方脚本文档 圣典的部分汉化文档 Animator学习系列总目录 1.Unity-Animator学习系列---API 2.Unity-Animator学习系列---控制IK 3.Unity-Animator学习系列---剪辑播放后位置预判(Animator.Target) 4.Unity-An

Python学习系列(八)( 面向对象基础)

 Python学习系列(八)( 面向对象基础) Python学习系列(七)( 数据库编程) 一,面向对象 1,域:属于一个对象或类的变量.有两种类型,即实例变量—属于每个实例/类的对象:类变量—属于类本身. 2,类的方法:对象也可以使用属于类的函数来具有功能,这样的函数称之为类的方法.域和方法合称为类的属性.类使用class关键字创建,类的属性被列在一个缩进块中. 3,self:类的方法与普通的函数只有一个特别的区别----他们必须有一个额外的第一个参数名称,但是在调用的时候不能为其赋值,Pyt