标签：
前面已经介绍了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：
<div id="container">
<div id="head">博客园</div>
<div id="content">
<div id="kindField">
<div id="kindHeader">分 类</div>
<ul id="kindList" data-bind="template:{name:‘kindTmpl‘,foreach:kindList}"></ul>
</div>
<div id="essayField">
<div id="essayHeader">随笔</div>
<table id="essayList" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>标题</td><td class="w40 tc">发布<br />状态</td><td class="w40 tc">评论</td><td class="w40 tc">页面<br />浏览</td><td class="w40 tc">RSS<br />阅读</td><td class="w40 tc">操作</td><td class="w40 tc">操作</td>
</tr>
</thead>
<tbody data-bind="template:{name:‘essayTmpl‘,foreach:essayList}"></tbody>
</table>
</div>
</div>
</div>
分类模板和文章模板：
<script type="text/tmpl" id="kindTmpl">
<li><a data-bind="attr:{href:Url}"><span data-bind="text:Name"></span>(<span data-bind="text:Count"></span>)</a></li>
</script>
<script type="text/tmpl" id="essayTmpl">
<tr>
<td>
<a data-bind="attr:{href:Url,title:Name}">
<span data-bind="text:Name"></span>(<span data-bind="text:Date"></span>) <span data-bind="ifnot:Status">[草稿箱]</span>
</a>
</td>
<td class="tc" data-bind="text:$parent.getStatus($data.Status)"></td>
<td class="tc" data-bind="text:Comment"></td>
<td class="tc" data-bind="text:PageView"></td>
<td class="tc" data-bind="text:RssView"></td>
<td class="tc"><a class="action" data-bind="click:$parent.edit">编辑</a></td>
<td class="tc"><a class="action" data-bind="click:function(){$parent.del($element);}">删除</a></td>
</tr>
</script>
三、数据绑定
前台定义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("<tr><td style=‘color:red;border:none;‘>删除成功！</td></tr>");
}
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();
标签：
原文地址：http://www.cnblogs.com/4littleProgrammer/p/4835709.html
