最近项目需要用到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 = ; 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: , message: "请输入大于1的整数" },
max: { params: , 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 - ].ID() +
var obj = {
ID: ko.observable(id),
Name: ko.observable("test"),
Age: ko.observable()
};
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<)
{
UserInfo info = new UserInfo { ID = , Name = "gavin ma", Age = };
UserInfo info2 = new UserInfo { ID = , Name = "lor liu", Age = };
UserInfo info3 = new UserInfo { ID = , Name = "mark ma", Age = };
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的简单示例

knockout示例的更多相关文章

  1. Knockout示例:User数据CRUD

    模拟数据user.json. { "page": 0, "rows": 0, "total": 161, "isSuccess&q ...

  2. KnockOut.js入门示例详解

    KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架. KO的核心就是绑定,包括数据绑定和行为绑定: K ...

  3. knockout.js模板绑定之利用Underscore.js模板引擎示例

    View代码 <h1>People</h1> <ul data-bind="template: { name: 'peopleList' }"> ...

  4. Knockout JS 入门示例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  5. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

  6. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  7. Knockout.Js官网学习(value绑定)

    前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...

  8. KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法

    注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...

  9. Knockout.Js案例一Introduction

    </strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...

随机推荐

  1. IP基础知识与分配实现

    一.IP寻址 1.划分网络ID和主机ID的最初方案是使用地址分类. 2.A类:0.0.0.0-127.255.255.255 B类:128.0.0.0-191.255.255.255 C类:192.0 ...

  2. vue-video-player的使用总结

    由于公司的项目是网上教育的,像网易云课堂那种教育网站,因而会有很多课程需要在线观看的,所以视频插件是必不可少的. 由于我用vue开发项目,所以找视频插件也找和vue贴近的.最后选择了vue-video ...

  3. java php c# 三种语言的AES加密互转

    java php c# 三种语言的AES加密互转 最近做的项目中有一个领取优惠券的功能,项目是用php写得,不得不佩服,php自带的方法简洁而又方便好用.项目是为平台为其他公司发放优惠券,结果很囧的是 ...

  4. spring boot 集成 shiro

    写在前面 1.Shiro是Apache下的一个开源项目,我们称之为Apache Shiro.它是一个很易用与Java项目的的安全框架,提供了认证.授权.加密.会话管理,与spring Security ...

  5. scrum vs devops vs sre

    DevOps&SRE 超越传统运维之道[北京站] IT大咖说 - 大咖干货,不再错过 http://www.itdks.com/eventlist/detail/908

  6. KrakenD: API Gateway and Manager

    KrakenD: API Gateway and Manager http://www.krakend.io/

  7. HDU 3979 Monster (贪心排序)

    Monster Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. Project 03- STM32F4xx PID controller

    Project 03- STM32F4xx PID controller CMSIS files from ARM provides ARM Math functions. There are als ...

  9. nRF51 DK : nRF51822 Development Kit for Bluetooth Smart, ANT and 2.4GHz applications.

    KEY FEATURES • Affordable, Rapid prototyping and development solution for nRF51 Series SoCs • Kit su ...

  10. 荣耀 6 安装 SD 卡,提示:SD卡已安全移除

    先前买了个 荣耀6(购买链接),自带存储只有 16G,用来一段时间后,老是提示存储不足.后来发现是 微信 等软件占用了好多存储(缓存),, 好吧,在京东上买了个 64G 扩展卡(购买链接),安装过程如 ...