最近项目需要用到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的简单示例
时间： 2024-08-12 07:12:42