Knockout学习之与服务器的数据交互
到目前为止，已经对MVVM模式如何帮自己整洁的管理针对动态UI的客户端代码，
以及Knockout的可监听、绑定、依赖的工作方式有了很好的理解。
在绝大部分的Web应用中，你需要从服务器获取数据，再将修改后数据返回。
因为Knockout是一个纯客户端库，它能灵活的与各种服务器端技术(ASP.NET,Rails,PHP...)
和任何架构模式，数据库合作。只要服务器端能收发JSON格式数据(so easy)，我们就可以使用这种技术。
例子情景
google的Tasks应该很多人都用过吧。我们也来尝试一个。
View Code
<!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>
先给一个简单的单机版Tasks，add-remove功能都是完备的，看一下代码就差不多知道它是怎么运转的了，很简单。
接下来将会演示如何变成在线版。
从服务器获取数据
发送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; } } }
在TaskListViewModel末尾添加上接收返回数据的代码，并用它填入tasks数组。
//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); }); }
要注意的是你不能在加载数据后调用ko.applyBindings。
许多新手会犯这种错误：每次从后台获取到数据后都尝试重新绑定他们的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>
这里添加的<textarea>标签只是为了显示数据发生了什么：当Task内容发生变化时，该<textarea>绑定的内容也会动态的更新。
所以当点击提交按钮时，后台就会受到这个JSON数据
我们没必要让用户看到这个<textarea>，所以用一个隐藏的<input>代替就可以了。
<input type="hidden" name="tasks" data-bind="value:ko.toJSON(tasks)" />
至于在后台如何处理接收到的JSON数据，方式很多很简单，这里就不再赘言了。
这里有一个ASP.NET版本的例子。
向服务器返回数据：方法2
方法一是通过<form>标签的post方式向服务器发送数据，当然我们也完全可以
发送Ajax请求来替换它。例如，用一个普通的<button>标签代替在方法一中添加的<form>标签
<button data-bind="click:save">Save</button>
然后再在TaskListViewModel中实现save方法
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); } } ); }; }
服务器端内容
View Code
<%@ 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); } }
这里只是简单的写了一下而已。实际上如果将Knockout与ASP.NET MVC相结合的话，效果相当不错。
官方的学习教程这就学完了，接下来要做的就剩下各种API的学习啦
