查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记录吧!
到目前为止,经已对MVVM式模如何帮自己洁整的管理针对动态UI的客户端代码,
以及Knockout的可监听、定绑、依附的工作式方有了很好的懂得。
在绝大部分的Web用应中,你需要从服务器获得数据,再将修改后数据回返。
因为Knockout是一个纯客户端库,它能灵巧的与各种服务器端术技(ASP.NET,Rails,PHP...)
和任何构架式模,数据库作合。只要服务器端能发收JSON式格数据(so easy),我们就能够用使这类术技。
例子景情
google的Tasks应当很多人都用过吧。我们也来试尝一个。
<!DOCTYPE HTML> <html> <head> <title>Custom Bindings</title> <script src="../JS/jquery-latest.min.js" type="text/javascript"></script> <script src="knockout-2.2.0.js" type="text/javascript"></script> <style type="text/css"> body { font-family: Helvetica, Arial } input:not([type]), input[type=text], input[type=password], select { background-color: #FFFFCC; border: 1px solid gray; padding: 2px; } .codeRunner ul { list-style-type: none; margin: 1em 0; background-color: #cde; padding: 1em; border-radius: 0.5em; } .codeRunner ul li a { color: Gray; font-size: 90%; text-decoration: none } .codeRunner ul li a:hover { text-decoration: underline } .codeRunner input:not([type]), input[type=text] { width: 30em; } .codeRunner input[disabled] { text-decoration: line-through; border-color: Silver; background-color: Silver; } .codeRunner textarea { width: 30em; height: 6em; } .codeRunner form { margin-top: 1em; margin-bottom: 1em; } </style> </head> <body class="codeRunner"> <h3>Goagle Tasks</h3> <form data-bind="submit:addTask"> Add task:<input data-bind="value:newTaskText" placeholder="What needs to be done?" /> <button type="submit">Add</button> </form> <ul data-bind="foreach:tasks,visible:tasks().length > 0 "> <li> <input type="checkbox" data-bind="checked:isDone" /> <input type="text" data-bind="value:title,disable:isDone" /> <a href="#" data-bind="click:$parent.removeTask">Delete</a> </li> </ul> You have <b data-bind="text:incompleteTasks().length"> </b>incomplete task(s) <span data-bind="visible:incompleteTasks().length==0">- it's beer time!</span> <script type="text/javascript"> //Model function Task(data) { this.title = ko.observable(data.title); this.isDone = ko.observable(data.isDone); } //ViewModel function TaskListViewModel() { //Data var self = this; self.tasks = ko.observableArray([]); self.newTaskText = ko.observable(); self.incompleteTasks = ko.computed(function() { return ko.utils.arrayFilter( self.tasks(), function(task) { return !task.isDone(); } ); }); //Operations self.addTask = function() { self.tasks.push(new Task({ title: this.newTaskText() })); self.newTaskText(""); }; self.removeTask = function(task) { self.tasks.remove(task); }; } ko.applyBindings(new TaskListViewModel()); </script> </body> </html>
接下来将会演示如何成变线在版。
从服务器获得数据
发送Ajax求请是从台后获得JSON最简略的方法。
所以此次用jQuery的$.getJSON和$.ajax方法来实现。
获得数据-->将其定绑到ViewModel-->UI主动实现动态更新 这就是我们要的终最效果。
在服务器上有一些用来处置Ajax求请并回返JSON式格数据的代码。
<%@ WebHandler Language="C#" Class="KnockHandler" %> using System; using System.Web; public class KnockHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.Write("[{\"title\":\"上午去茶喝\"},{\"title\":\"午下在公司Coding\"},{\"title\":\"晚上约妹纸\"},{\"title\":\"洗洗睡吧\"}]"); } public bool IsReusable { get { return false; } } }
//ViewModel function TaskListViewModel() { //Load data from server $.getJSON("KnockHandler.ashx",{type:"tasks"}, function(data) { var mappedTasks = $.map(data, function(item) { return new Task(item); }); self.tasks(mappedTasks); }); }
多许新手会犯这类错误:每次从台后获得到数据后都试尝新重定绑他们的UI,
结果那是无效的。没有必要新重定绑,因为只更新既存的ViewModel就充足更新全部UI了。
这段代码利用从台后回返的原始数据数组,通过用使jQuery的$.map方法,将个一每条目的数据生成一个Task实例。
然后将生成的Task象对数组插入tasks数组中。因为tasks是被监听的,所以UI也会随之更新。
手动的还是动态的?
在之前的代码中演示了手动式方来获得并映射数据的式方。如果更加的主动化,可以看一下官方mapping API
它功能包含:
1.动态构建意任可监听数据的象对图表
2.通过定约式方映射或用使明白置配的映射回调
3.即使某个象对图表经已在页面上存在了,当你从数据库获得到最新数据后,仍然可以更新响应的UI.
向服务器回返数据:方法1
通过Ajax求请回返数据是没问题的,但我们还有更简略的方法值得参考。
如果在<form>标签里定绑了一些Model数据,那么你可以简略的直接把form发送到服务器。
这完全是小菜一碟,例如,在View底部添加如下form标签:
<form action="KnockHandler.ashx?type=saveform" method="post"> <textarea name="tasks" data-bind="value:ko.toJSON(tasks)"></textarea> <button type="submit">Save</button> </form>
所以当点击提交按钮时,台后就会到受这个JSON数据
我们没必要让用户看到这个 <textarea>,所以用一个藏隐的 <input>取代就能够了。
<input type="hidden" name="tasks" data-bind="value:ko.toJSON(tasks)" />
这里有一个 ASP.NET本版的例子。
向服务器回返数据:方法2
方法一是通过<form>标签的post式方向服务器发送数据,当然我们也完全可以
发送Ajax求请来替换它。例如,用一个一般的<button>标签取代在方法一中添加的<form>标签
<button data-bind="click:save">Save</button>
function TaskListViewModel(){ // .. all the existing code self.save = function() { $.ajax({ url:"KnockHandler.ashx" ,data: { data: ko.toJSON({ tasks: self.tasks }) ,type:"saveform" } ,type:"get" ,contentType:"application/json" ,success:function(result){ alert(result); } } ); }; }
<%@ WebHandler Language="C#" Class="KnockHandler" %> using System; using System.Web; public class KnockHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { string type = context.Request.Params["type"]; switch (type) { case "tasks": getTasks(context); break; case "saveform": saveForm(context); break; } } public bool IsReusable { get { return false; } } private void getTasks(HttpContext context) { string result = "[{\"title\":\"上午去茶喝\"}" +",{\"title\":\"午下在公司Coding\"}" +",{\"title\":\"晚上约妹纸\"}" +",{\"title\":\"洗洗睡吧\"}]"; context.Response.Write(result); } private void saveForm(HttpContext context) { string result = context.Request.Params["data"].ToString(); context.Response.Write("Server has received the data:\r" + result); } }
官方的学习教程这就学完了,接下来要做的就剩下各种API的学习啦
文章结束给大家分享下程序员的一些笑话语录: 话剧:程序员过沟
本剧内容纯属虚构,如有雷同……HEHE……俺也没办法了。
话说某市街道改建,某某软件公司门口横七竖八挖了几条大沟。一群程序员(SDK程序员赵某,VB程序员钱某,VC程序员孙某,DELPHI程序员李某)下班从公司里出来,看到门前的几条沟,于是各显神通……门前第一条沟也就半米来宽,SDK程序员赵某二话没说,轻轻一跃跳了过去,看到其它人纷纷把随身携带的公文包(类库)横在沟上踩着过沟,不屑地说,这么小一条沟,犯得着小题大做用那个吗?看我多么轻松多么洒脱多么……多么……(众人皆怒目横视之……)
接着第二条沟有点宽度。SDK程序员赵某还是还是一马当先,飞跃而起……不好,还差一点才到……幸好凭着多年的(跳远?编程?)经验,单手抓住沟沿,颤巍巍地爬了上来,嘴里还念念有词“高手就是高手啊,虽然差一点就……不过毕竟……HEHE……跳远是过沟的基础嘛,有基础(SDK)就有一切的说……”(众人作瞠目结舌状……)看到别人跳过去了,可自己又跳不了那么远,只好再想办法了……VB程序员钱某,DELPHI程序员李某打开手提,连上手机,开始上网找可供过沟的控件……VC程序员孙某却不慌不忙,打开公文包,把几块衬板拆了下来,然后三下五除二拼成一个简易木桥……“虽然这几个板子(类)做得不怎么样,不过先把这个项目应付过去,有时间我自己做一个好了……”于是踩着板子过了沟。
这时钱某和李某也分别找到了合适的东东。钱某找到的是“钢丝绳.ocx”,安装简单,使用方便,拉出一头,对孙某说“大虾,顺手拉兄弟一把……”,于是把绳子系在沟两边的绿化树木上,踩着钢丝就过了沟。刚刚站稳就四方作揖,“小生这里有礼了”。这时一戴着黄袖圈的老太太跳了出来,抓住钱某,“破坏绿化树木,罚款XXXX元,交钱,交钱,交钱!”(老人家作双枪老太婆怒视伪军状
……钱某被逼无奈,只好边掏钱,边对着后台叫道“导演,我这可是因公牺牲,不给个烈士称号也得报销”,后台一个臭鸡蛋飞出,“叫什么叫,我这个月的粮饷还不知哪里去领呢,都什么时代了,你不下岗都不错了……”)
李某看着刚刚好不容易从台湾拖回来的“铝条.ZIP”