前面已经介绍了ko的基本用法，结合官方文档，基本就可以实际应用了。本章作为ko学习的最后一篇，实现一个简单的demo。主要集中在ko，所以后台数据都是静态的。类似于博园，有一个个人文章的分类列表，一个文章列表。可以在文章最后下载工程源代码（包括之前demo的代码）。实现效果图如下：
一、准备数据
分类信息Kind:
public class Kind { public string Url { get; set; } public string Name { get; set; } public int Count { get; set; } } 文章信息Essay:
public class Essay { public string Url { get; set; } public string Name { get; set; } public short Status { get; set; } public int Comment { get; set; } public int PageView { get; set; } public int RssView { get; set; } public string Date { get; set; } } 二、准备模板
主要html：
博客园分 类
随笔
标题 发布状态 评论 页面浏览 RSS阅读 操作 操作
分类模板和文章模板：
三、数据绑定
前台定义model和viewmodel，然后通过ajax获取数据，完成绑定。
function Kind(){ this.Url = ""; this.Name = ""; this.Count = ""; this.getKind = function(){ $.getJSON("../Handlers/GetKind.ashx",function(data){ kindVM.kindList(data); }) } } function KindList(){ this.kindList = ko.observable([]); } function Essay(){ this.Url = ""; this.Name = ""; this.Status = 0; this.Comment = 0; this.PageView = 0; this.RssView = 0; this.Date = ""; this.getEssay = function(){ $.getJSON("../Handlers/GetEssay.ashx",function(data){ essayVM.essayList(data); }) } } function EssayList(){ this.essayList = ko.observableArray([]); this.edit = function(essay){ alert("编辑：" + essay.Url); } this.del = function(dom){ var jTr = $(dom).parents("tr"); jTr.replaceWith("删除成功！"); } this.getStatus = function(status){ if(status === 0){ return "未发布"; } return "发布"; } } var kind = new Kind(); var kindVM = new KindList(); var essay = new Essay(); var essayVM = new EssayList(); ko.applyBindings(kindVM,document.getElementById("kindField")); ko.applyBindings(essayVM,document.getElementById("essayField")); kind.getKind(); essay.getEssay();