你的位置:首页 > Java教程

[Java教程]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 >发布<br />状态</td><td >评论</td><td >页面<br />浏览</td><td >RSS<br />阅读</td><td >操作</td><td >操作</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 data-bind="text:$parent.getStatus($data.Status)"></td>    <td data-bind="text:Comment"></td>    <td data-bind="text:PageView"></td>    <td data-bind="text:RssView"></td>    <td ><a data-bind="click:$parent.edit">编辑</a></td>    <td ><a 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();

 

源码下载