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

 

源碼下載

knockout學習筆記10：demo