前面已经介绍了ko的基本用法,结合官方文档,基本就可以实际应用了。本章作为ko学习的最后一篇,实现一个简单的demo。主要集中在ko,所以后台数据都是静态的。类似于博园,有一个个人文章的分类列表,一个文章列表。可以在文章最后下载工程源代码(包括之前demo的代码)。实现效果图如下:

一、准备数据

  分类信息Kind:

  1. public class Kind
  2. {
  3. public string Url { get; set; }
  4. public string Name { get; set; }
  5. public int Count { get; set; }
  6. }

  文章信息Essay:

  1. public class Essay
  2. {
  3. public string Url { get; set; }
  4. public string Name { get; set; }
  5. public short Status { get; set; }
  6. public int Comment { get; set; }
  7. public int PageView { get; set; }
  8. public int RssView { get; set; }
  9. public string Date { get; set; }
  10. }

二、准备模板

  主要html:

  1. <div id="container">
  2. <div id="head">博客园</div>
  3. <div id="content">
  4. <div id="kindField">
  5. <div id="kindHeader">分 类</div>
  6. <ul id="kindList" data-bind="template:{name:'kindTmpl',foreach:kindList}"></ul>
  7. </div>
  8. <div id="essayField">
  9. <div id="essayHeader">随笔</div>
  10. <table id="essayList" cellpadding="0" cellspacing="0">
  11. <thead>
  12. <tr>
  13. <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>
  14. </tr>
  15. </thead>
  16. <tbody data-bind="template:{name:'essayTmpl',foreach:essayList}"></tbody>
  17. </table>
  18. </div>
  19. </div>
  20. </div>

  分类模板和文章模板:

  1. <script type="text/tmpl" id="kindTmpl">
  2. <li><a data-bind="attr:{href:Url}"><span data-bind="text:Name"></span>(<span data-bind="text:Count"></span>)</a></li>
  3. </script>
  4. <script type="text/tmpl" id="essayTmpl">
  5. <tr>
  6. <td>
  7. <a data-bind="attr:{href:Url,title:Name}">
  8. <span data-bind="text:Name"></span>(<span data-bind="text:Date"></span>) <span data-bind="ifnot:Status">[草稿箱]</span>
  9. </a>
  10. </td>
  11. <td class="tc" data-bind="text:$parent.getStatus($data.Status)"></td>
  12. <td class="tc" data-bind="text:Comment"></td>
  13. <td class="tc" data-bind="text:PageView"></td>
  14. <td class="tc" data-bind="text:RssView"></td>
  15. <td class="tc"><a class="action" data-bind="click:$parent.edit">编辑</a></td>
  16. <td class="tc"><a class="action" data-bind="click:function(){$parent.del($element);}">删除</a></td>
  17. </tr>
  18. </script>

三、数据绑定

  前台定义model和viewmodel,然后通过ajax获取数据,完成绑定。

  1. function Kind(){
  2. this.Url = "";
  3. this.Name = "";
  4. this.Count = "";
  5. this.getKind = function(){
  6. $.getJSON("../Handlers/GetKind.ashx",function(data){
  7. kindVM.kindList(data);
  8. })
  9. }
  10. }
  11. function KindList(){
  12. this.kindList = ko.observable([]);
  13. }
  14. function Essay(){
  15. this.Url = "";
  16. this.Name = "";
  17. this.Status = 0;
  18. this.Comment = 0;
  19. this.PageView = 0;
  20. this.RssView = 0;
  21. this.Date = "";
  22. this.getEssay = function(){
  23. $.getJSON("../Handlers/GetEssay.ashx",function(data){
  24. essayVM.essayList(data);
  25. })
  26. }
  27. }
  28. function EssayList(){
  29. this.essayList = ko.observableArray([]);
  30. this.edit = function(essay){
  31. alert("编辑:" + essay.Url);
  32. }
  33. this.del = function(dom){
  34. var jTr = $(dom).parents("tr");
  35. jTr.replaceWith("<tr><td style='color:red;border:none;'>删除成功!</td></tr>");
  36. }
  37. this.getStatus = function(status){
  38. if(status === 0){
  39. return "未发布";
  40. }
  41. return "发布";
  42. }
  43. }
  44. var kind = new Kind();
  45. var kindVM = new KindList();
  46. var essay = new Essay();
  47. var essayVM = new EssayList();
  48. ko.applyBindings(kindVM,document.getElementById("kindField"));
  49. ko.applyBindings(essayVM,document.getElementById("essayField"));
  50. kind.getKind();
  51. essay.getEssay();

源码下载

knockout学习笔记10:demo的更多相关文章

  1. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  2. 并发编程学习笔记(10)----并发工具类CyclicBarrier、Semaphore和Exchanger类的使用和原理

    在jdk中,为并发编程提供了CyclicBarrier(栅栏),CountDownLatch(闭锁),Semaphore(信号量),Exchanger(数据交换)等工具类,我们在前面的学习中已经学习并 ...

  3. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  4. 《C++ Primer Plus》学习笔记10

    <C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<&l ...

  5. SQL反模式学习笔记10 取整错误

    目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...

  6. golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息

    golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...

  7. Spring MVC 学习笔记10 —— 实现简单的用户管理(4.3)用户登录显示全局异常信息

    </pre>Spring MVC 学习笔记10 -- 实现简单的用户管理(4.3)用户登录--显示全局异常信息<p></p><p></p>& ...

  8. Hadoop学习笔记(10) ——搭建源码学习环境

    Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...

  9. APUE学习笔记——10.9 信号发送函数kill、 raise、alarm、pause

    转载注明出处:Windeal学习笔记 kil和raise kill()用来向进程或进程组发送信号 raise()用来向自身进程发送信号. #include <signal.h> int k ...

随机推荐

  1. 微服务和SOA服务

    微服务和SOA都被认为是基于服务的架构,这意味着这两种架构模式都非常强调将“服务”作为其架构中的首要组件,用于实现各种功能(包括业务层面和非业务层面).微服务和SOA是两种差异很大的架构模式,但是他们 ...

  2. scikit-learn预处理实例之一:使用FunctionTransformer选择列

    本例展示怎样在一个管道中使用FunctionTransformer.如果你知道你的数据集的第一主成分与分类任务无关,你可以使用FunctionTransformer选取除PCA转化的数据的第一列之外的 ...

  3. C#中级-常用多线程操作(持续更新)

    一.前言       多线程操作一直是编程的常用操作,掌握好基本的操作可以让程序运行的更加有效.本文不求大而全,只是将我自己工作中常常用到的多线程操作做个分类和总结.平时记性不好的时候还能看看.本文参 ...

  4. alienware Win8 系统安装

    原作者网名 alienware-小来: 我的外星人 老是装系统出错.我觉得写的不错.把原作者的东西拿过来.. 对于win7系统的用户来说想要体验下win8.1系统,或者是原来win8.1系统加装固态后 ...

  5. C语言实现2个大数相加。

    #include<stdio.h>#include<string.h>int main(){    char s1[100],s2[100];    int num1[31], ...

  6. 数据结构:队列 链表,顺序表和循环顺序表实现(python版)

    链表实现队列: 尾部 添加数据,效率为0(1) 头部 元素的删除和查看,效率也为0(1) 顺序表实现队列: 头部 添加数据,效率为0(n) 尾部 元素的删除和查看,效率也为0(1) 循环顺序表实现队列 ...

  7. 流程控制和循环.png

  8. 以ZeroMQ谈消息中间件的设计【译文】

    本文主要是探究学习比较流行的一款消息层是如何设计与实现的 ØMQ是一种消息传递系统,或者乐意的话可以称它为"面向消息的中间件".它在金融服务,游戏开发,嵌入式系统,学术研究和航空航 ...

  9. ng-option指令使用记录,设置默认值需要注意

    ng-options一般有以下用法: 数组作为数据源: label for value in array select as label for value in array label group ...

  10. iOS - 静态库的创建与使用

    在日常项目开发中,不论是为了两个公司项目上的业务交流还是为了减少项目的编译时间,有的时候我们会把项目中的私密内容打包成静态库,或者是把项目中变动较少一部分打包成静态库以便提高编译效率,那么下面我们就来 ...