【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子
好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西。
也很抱歉,突然看到好多的短消息,真不知道该如何给大家回复。。。
最近试着晚上抽时间写一些knockoutjs和mvc的文章。这里先写一点knockoutjs的东西。
关于knockoutjs到底是什么,如果你不知道,可以看看几个月前我写的一篇文章介绍它。
我也是之前安装了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.并从后台异步传输数据。
【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子的更多相关文章
- 【工作笔记二】ASP.NET MVC框架下使用MVVM模式
ASP.NET MVC框架下使用MVVM模式 原文:http://www.cnblogs.com/n-pei/archive/2011/07/21/2113022.html 对于asp.net mvc ...
- ReactiveCocoa框架下的MVVM模式解读
记录一些MVVM文章中关于ReactiveCocoa的代码: 实例一:带有分页的文章列表,根据文章类别过滤出文章的列表,可以进入文章详细页面 1:YFBlogListViewModel 首先了解关于列 ...
- WPF Prism框架下基于MVVM模式的命令、绑定、事件
Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...
- 写自己的ASP.NET MVC框架(下)
上篇博客[写自己的ASP.NET MVC框架(上)] 我给大家介绍我的MVC框架对于Ajax的支持与实现原理.今天的博客将介绍我的MVC框架对UI部分的支持. 注意:由于这篇博客是基于前篇博客的,因此 ...
- 写自己的ASP.NET MVC框架(上)
http://www.cnblogs.com/fish-li/archive/2012/02/12/2348395.html 阅读目录 开始 ASP.NET程序的几种开发方式 介绍我的MVC框架 我的 ...
- 学习“迷你ASP.NET MVC框架”后的小结
看蒋老师MVC的书第二个大收获可以是算是看了这个迷你ASP.NET MVC框架了,虽然它远不如真正ASP.NET MVC(下文简称“MVC”)那么复杂庞大,但在迷你版中绕来绕去也够呛的.这部分我看了几 ...
- BrnShop开源网上商城第二讲:ASP.NET MVC框架
在团队设计BrnShop的web项目之初,我们碰到了两个问题,第一个是数据的复用和传递,第二个是大mvc框架和小mvc框架的选择.下面我依次来说明下. 首先是数据的复用和传递:对于BrnShop的每一 ...
- ASP.NET MVC框架开发系列课程 (webcast视频下载)
课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名“老赵”.英文名“Jeffrey Zhao”,技术博客为http://jeffreyzhao.cnblogs.com),微软最有价值专家(ASP.NET ...
- C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(下)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(下)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...
随机推荐
- 使用rpm安装mysql的默认目录
--使用rpm安装mysql的默认目录:1.数据库目录/var/lib/mysql/2.配置文件/usr/share/mysql(mysql.server命令及配置文件)3.相关命令/usr/bin( ...
- codevs 2995 楼房
/*暴力30分*/ #include<iostream> #include<cstring> #include<cstdio> #include<map> ...
- Linux中命令行编译java接口总是提示找不到符号的疑难杂症的解决
今天学习java的接口,在linux的命令行下写代码练练手吧,啪啪啪一顿猛敲,写了一个接口UsbInserface,UDisk继承UsbInterface,写完了那就编译到bin目录呗. 当时写程序的 ...
- MVC4建立DBContext的EF6数据
MVC4建立DBContext的EF6数据时 1.需要using System.Data.Entity;命名空间 2.此命名空间需要安装EntityFromwork.dll,此dll可以在项目——&g ...
- 字典与集合(Dictionary与Collection)
Dictionary对象将替换Collection对象,并提供附加的语言从而使增加和删除记录的速度比以前提高三倍 虽然Visual Basic 6.0只有很少的新特点,但是具有某些功能强大的新的对象模 ...
- PHP Calendar 函数
PHP 5 Calendar 函数 函数 描述 cal_days_in_month() 针对指定的年份和历法,返回一个月中的天数. cal_from_jd() 把儒略日计数转换为指定历法的日期. ca ...
- Covariant Returen Types(协变返回类型)
基类virtual func返回类型为某个类(class Super)的ptr或ref,子类重写的virtual func返回类型可改为该类子类(class Sub : public Super)的p ...
- IE6-BUG-CSS兼容详解
1.IE6背景闪烁 如果你给链接.按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象.造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可 ...
- Axure矩形边框重合边框变成双倍宽度解决办法
选中两个矩形,菜单栏选择项目——项目设置——边界对齐(选择中心边界沿形状的边缘或者内边界对齐.将外边界对齐改为内边界对齐),即可去掉重合效果
- Git 初始化配置
先给大家推荐个很不错的GIT学习资料:廖雪峰 <Git简介> http://www.liaoxuefeng.com/wiki/0013739516305929606dd183612485 ...