最近项目需要用到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. mint-ui 关于有时候官网有时候打不开的问题

    难道就我只有这种情况,不知所措的,要不好看看是什么,看到别人说,是你路由的问题,换个路由的可以了,我觉得不是,那试试HTTP协议的问题 换个https试试就可以 这是什么原因呢? http是超文本传输 ...

  2. 循序渐进学.Net Core Web Api开发系列【0】：序言与目录

    一.序言 我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...

  3. View 事件分发

    View 事件分发 学习自 <Android开发艺术探索> 官方文档-MotionEvent 事件分发机制漫谈 View的事件分发机制,使我们了解View的工作原理继而学习如何自定义Vie ...

  4. commonjs，amd，cmd

    在某些库中,经常会看到函数最前面有一个分号.其实是为了防止自动化工具拼接js时,如果前面的js文件的结尾处忘了加分号,拼接出来的代码容易挂,加分号这种行为属于防御式编程. 一个模块就是实现特定功能的文 ...

  5. leetcode 两数之和 python

      两数之和     给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 1 ...

  6. 洛谷T21778 过年

    题目描述 有 n(1 \leq n \leq 10^5)n(1≤n≤105) 个小朋友,过年了,要发放 m(1 \leq m \leq 10^5)m(1≤m≤105) 次礼物. 每次发放,会给出三个参 ...

  7. Android五个进程等级（转）

    Android五个进程等级 1.前台进程(Foreground process): 用户当前工作所需要的.一个进程如果满足下列任何条件被认为是前台进程: 正运行着一个正在与用户交互的活动(Activi ...

  8. SGU 275. To xor or not to xor （高斯消元法）

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=275 题意:给你n个数,可以选择任意个数异或,但是要使得最后的异或值最大. 我们把每 ...

  9. 使用 Android 的日志工具LogCat

    Android 中的日志工具类是 Log(android.util.Log),这个类中提供了如下几个方法来供我们打印日志. 1.    Log.v() 这个方法用于打印那些最为琐碎的,意义最小的日志信 ...

  10. delete_failed_internal_error安装失败

    一.错误提示 二.最简单的解决方式 使用Android Studio (IDEA 2018.3.5)进行开发时,无论是模拟器还是,USB连接手机,都是无法安装和启动APP.后来发现是IDEA中,设置的 ...