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();

 

源码下载