knockout示例

最近项目需要用到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的简单示例

posted on 2015-05-22 15:35  dz45693  阅读(1474)  评论(0)  编辑  收藏  举报

导航