【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子

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

好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,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-10-10 05:50:36

【转】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开发人员或爱好者来说,MVVM模式可能你不是很了解.本来这个模式就是针对WPF和Silverlight开发提出的开发模式. 大概一年前,我当时迷恋Silverlight时,学习了MVVM一段时间,没想到现在可以在MVC用到. 我看了下之前有两篇文章介绍MVVM的.希望可以对MVVM不了解的人有点帮助

WPF Prism框架下基于MVVM模式的命令、绑定、事件

原文:WPF Prism框架下基于MVVM模式的命令.绑定.事件 Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/wi

ReactiveCocoa框架下的MVVM模式解读

记录一些MVVM文章中关于ReactiveCocoa的代码: 实例一:带有分页的文章列表,根据文章类别过滤出文章的列表,可以进入文章详细页面 1:YFBlogListViewModel 首先了解关于列表的ViewModel的代码内容: #import <Foundation/Foundation.h> #import <ReactiveCocoa.h> @class YFCategoryArticleListModel; /** * 文章列表的视图模型. */ @interface

写自己的ASP.NET MVC框架(下)

上篇博客[写自己的ASP.NET MVC框架(上)] 我给大家介绍我的MVC框架对于Ajax的支持与实现原理.今天的博客将介绍我的MVC框架对UI部分的支持. 注意:由于这篇博客是基于前篇博客的,因此有些已说过的内容将会直接跳过,也不会给出提示.所以,如果要想理解这篇博客,那么阅读上篇博客[写自己的ASP.NET MVC框架(上)]则是必要的. 回到顶部 MyMVC的特点 在开发MyMVC的过程中,我吸取了一些ASP.NET WebForm的使用经验,也参考了ASP.NET MVC,也接受了Ma

ASP.NET MVC框架下添加菜单栏及分页项目

原创声明:本文为作者原创,转载请注明出处:http://www.cnblogs.com/DrizzleWorm/p/7274866.html ,谢谢! 我是做前端开发的,之前用C#的三层架构(UI.BLL.DAL)做过一个网站,这是我第一次接触ASP.NET MVC框架,首先给大家分享别人整理的ASP.NET MVC框架的一组教程:http://www.cnblogs.com/powertoolsteam/archive/2015/08/13/4667892.html内容很齐全,我是在先看了其他

BrnShop开源网上商城第二讲:ASP.NET MVC框架

在团队设计BrnShop的web项目之初,我们碰到了两个问题,第一个是数据的复用和传递,第二个是大mvc框架和小mvc框架的选择.下面我依次来说明下. 首先是数据的复用和传递:对于BrnShop的每一次请求,程序都要分成好几个阶段执行,例如验证,执行动作方法等等,在各个阶段我们可能需要重复使用同一信息,而我们的愿景就是希望此信息只需获取一次,然后沿着流程管道一直流动,这样在后面的阶段中就可以直接使用,不用再重新获取了,提高程序的性能.举例来说:在授权验证阶段,我们为对用户进行验证,从而获取了用户

学习ASP.NET MVC框架揭秘笔记目录

学习ASP.NET MVC框架揭秘笔记目录 第一章     ASP.NET+MVC 1.1传统的MVC模式 持续更新中,,,,

.Net Framework 4.5.1 ASP.NET MVC 5 下新建视图报“错误 运行所选代码生成器时出错 无法检索元数据 没有为该对象定义无参数构造函数”

当在控制器中新建视图的时候,选择的视图界面如下: 执行添加后报如下错误: 错误的内容为: 错误运行所选代码生成器时出错 无法检索"XXX"的元数据没有为该对象定义无参数构造函数 Unable to retrieve metadata for 'XXX'. No parameterless constructor defined for this object. 这个错误一直误导我,以为是模型类的问题,找了半天找不到解决方法,郁闷到死,后来发现是数据上下文的问题. 想到解决方案使用的是D

asp.net MVC 框架中控制器里使用Newtonsoft.Json对前端传过来的字符串进行解析

下面我用一个实例来和大家分享一下我的经验,asp.net MVC 框架中控制器里使用Newtonsoft.Json对前端传过来的字符串进行解析. using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace MyWebApp.Controllers { public class TestController : Controller { public A