knockout示例

最近项目需要用到knockout js,有关knockout的介绍网上已经很多很多了,但是很少有比较全面的示例,于是乎我就自己做了一个小demo,已备以后查阅。knockout经常和knockout.mapping 和knockout.validation联合使用。运行效果如图:

 

knockout示例

实现了添加、删除、验证和保存功能。由于时间关系,我就直接贴代码了。

<!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的简单示例

你可能感兴趣的:(knockout)