knockout学习笔记10：demo

　　前面已经介绍了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();