最近项目需要用到knockout js，有关knockout的介绍网上已经很多很多了，但是很少有比较全面的示例，于是乎我就自己做了一个小demo，已备以后查阅。knockout经常和knockout.mapping 和knockout.validation联合使用。运行效果如图：
实现了添加、删除、验证和保存功能。由于时间关系，我就直接贴代码了。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ko mapping</title> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript" src="js/knockout-min.js"></script> <script type="text/javascript" src="js/knockout.mapping-latest.js"></script> <script type="text/javascript" src="js/knockout.validation.js"></script> </head> <body> <div> <table data-bind="foreach: Data"> <tr> <td> <p>ID: <span data-bind="text:ID"></span></p> </td> <td> <p> Name: <input type="text" data-bind="value:Name" /> </p> </td> <td> <p> Age: <input type="text" data-bind="value:Age" /> </p> </td> <td> <input type="button" value="Remove" data-bind="click:$root.remove" /></td> </tr> </table> <input type="button" value="Add" data-bind="click:Add" /> <input type="button" value="submit" data-bind="click:save" /> </div> <script type="text/javascript"> $(function () { var applyValidators = function (vm) { var data = vm.Data(); for (var i = 0; i < data.length; i++) { applyValidatorsToPerson(data[i]); } } var applyValidatorsToPerson = function (p) { p.Name.extend({ required: { params: true, message: "请输入Name" } }); p.Age.extend({ required: { params: true, message: "请输入Age" }, min: { params: 1, message: "请输入大于1的整数" }, max: { params: 100, message: "请输入小于100的整数" }, }); } var viewmodel = function () { self = this; self.Data = ko.observableArray() self.save = function () { self.errors = ko.validation.group(self); if (self.isValid()) { var data = ko.mapping.toJS(self.Data); data = JSON.stringify(data); $.post("/komap.ashx", data, null, null); } else { self.errors.showAllMessages(); } } self.Add = function () { var index = self.Data().length; var id = self.Data()[index - 1].ID() + 1 var obj = { ID: ko.observable(id), Name: ko.observable("test"), Age: ko.observable(30) }; applyValidatorsToPerson(obj); self.Data.push(obj); } self.remove = function (p) { self.Data.remove(p); }; } var vm, model; $.get("/komap.ashx", null, function (data) { var jd = JSON.parse(data); vm = ko.mapping.fromJS(jd); model = new viewmodel(); $.extend(model, vm, true); applyValidators(model); ko.applyBindings(model); }, null); }); </script> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Newtonsoft.Json; using System.IO; namespace WebApp { /// <summary> /// Summary description for komap /// </summary> public class komap : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string methodName = context.Request.RequestType; Datainfo data = new Datainfo(); ; if (methodName.Equals("POST")) { string str = string.Empty; using (StreamReader sr = new StreamReader(context.Request.InputStream)) { str = sr.ReadToEnd(); str = context.Server.UrlDecode(str); } Datainfo info = new Datainfo { Data = JsonConvert.DeserializeObject<List<UserInfo>>(str) }; if (info != null) context.Cache["komap"] = info; } else { data = GetData(); } string ret = JsonConvert.SerializeObject(data); context.Response.Write(ret); } private static Datainfo GetData() { object obj = HttpContext.Current.Cache.Get("komap"); if (obj == null || (obj as Datainfo).Data.Count<1) { UserInfo info = new UserInfo { ID = 1, Name = "gavin ma", Age = 30 }; UserInfo info2 = new UserInfo { ID = 2, Name = "lor liu", Age = 31 }; UserInfo info3 = new UserInfo { ID = 3, Name = "mark ma", Age = 29 }; List<UserInfo> list = new List<UserInfo>(); list.Add(info); list.Add(info2); list.Add(info3); Datainfo data = new Datainfo { Data = list }; obj = data; HttpContext.Current.Cache.Insert("komap", obj); } return obj as Datainfo; } public bool IsReusable { get { return false; } } } public class UserInfo { public int ID { set; get; } public string Name { set; get; } public int Age { set; get; } } public class Datainfo { public List<UserInfo> Data { set; get; } } }
代码非常简单。大家可以在http://download.csdn.net/detail/dz45693/8728239 这里下载有关knockout的简单示例