項目中遇到太多JQuery Ajax 與 Knockout.js的結合來處理數據的情況，今天將這部分內容梳理一下。一來弄清楚二者結合處理數據的流程，二來是感覺二者結合在一起用的時候有點將二者搞混了，弄不清楚誰是誰，將他們理清，划分他們的職責范圍。
項目中有這樣一個頁面，需要在關聯訂單處輸入要關聯的訂單號，然后將訂單的信息賦值到對應的地方。
首先我們將需要用到的js文件添加到模板頁上。一個knockout.js文件和一個Jquery文件就OK了，knockout可以到http://knockoutjs.com/去下載。
<script src="@Url.Content("~/Js/knockout-2.1.0.js")" type="text/javascript"></script> <script src="@Url.Content("~/Js/jquery-1.7.2.js")" type="text/javascript"></script>
然后就是Konckout的使用了，這里我們先不考慮“關聯訂單”的訂單編號的獲取問題，這個並不難。我們先通過Konckout給該文本框一個事件。怎么添加這個事件呢？相關的文檔在http://knockoutjs.com/頂部導航欄的Documentation里都可以找到。這里要說的就是，為Html標簽添加Konckout的時候，記住data-bind=" "就行了，這是為Html標簽添加Konckout的固定標簽。下面我們就先為“關聯訂單”文本框添加一個blur事件來獲取訂單的信息。
<input name="RelationOrderID" type="text" data-bind="event:{blur:OrderDetailGet}" id="RelationOrderID" class="input_02"/>
看到上面代碼中的data-bind="event:{blur:OrderDetailGet}"了嗎？這句話的意思就是:給該標簽添加一個名為OrderDetailGet的blur事件。這里要注意的是：標簽原來的事件名稱叫做onblur，這里叫blur。現在事件已經添加好了，我們就要去實現這個事件。(注意：需要時在html中添加 onkeypress=“return false”，因為這個文本框在form表單內，避免用戶點擊回傳后調用了form表單的提交.....)
那么怎么完成konckout事件在html中的實現呢，先來看一下konckout和html的一個關系圖。在konckout中有一個名叫“綁定”的東東，只有完成了總的綁定，才能真正使用強度的konckout。如下圖：左邊我們看做是一個konckout對象，假設我們是將相應的屬性綁定到相應的標簽上，如A屬性綁定到<A></A>標簽。這里就看我們選定怎樣的綁定范圍了，如果我們將knockout綁定到div(big)，那么我們就能實現將A屬性綁定到A標簽，B屬性綁定到B標簽等等。但是如果我們選定div(small)為綁定范圍，那就不能將值綁定到A標簽了。說了這么多，其實就是講一個konckout綁定范圍的問題。
下面是兩種綁定的代碼，這里用到的$.ajax就是ajax的技術范疇了，其他的都是knockout的范疇。對於這兩種綁定的區別，我並不是很清楚，希望可以有高人指點一下。
第一種：
//第一種 workOrderModel = function () { var self = this; self.Details = ko.observableArray(); self.OrderDetailGet = function () { $.ajax({ type: "POST", //post 或 get url: requestUrl.getOrderById, //action地址 下面會說到 dataType: "json", //數據類型 json data: { orderId: $("#RelationOrderID").val() }, //要傳到的參數 擴展：$("form").serialize() 將form表單的值都傳遞 success: function (data) { //data 回傳的數據 $("#PayStatus").text(data.PaymentStatus); //賦值span $("#CountryCode").val(data.CountryCode); //賦值input(可用於select賦值) //遍歷 訂單詳情 var details = []; $.each(data.Detail, function (idx, product) { details.push({ detailId: product.DetailId, sku: product.SKU, img: product.Img, productName: product.ProductName, quantity: product.Quantity, unitPrice: product.UnitPrice, totalPrice: product.TotalPrice }); }); // 綁定 訂單詳情 這里與第二種不同 self.Details(details); } }); }; } //這里綁定需要 new對象 與第二種不同 //$("#content")[0] 這個參數限定了要綁定的html標簽的范圍，不添加此參數則綁定到最大范圍 ko.applyBindings(new workOrderModel(), $("#content")[0]);
第二種：
//第二種 var workOrderModel = { Details: ko.observableArray(), OrderDetailGet: function () { $.ajax({ type: "POST", url: requestUrl.getOrderById, dataType: "json", data: { orderId: $("#RelationOrderID").val() }, success: function (data) { //綁定 訂單詳情 這里與第一種不同(省去了循環代碼) var details = []; workOrderModel.Details(details); } }); } } ko.applyBindings(workOrderModel, $("#content")[0]);
現在說一下上邊講的ajax的url地址為什么要用request.getOrderById。這里原來的地址用的就是“/Controller/Action”，但是在項目部署后因為地址有些不同，就出現了找不到action的情況。那怎么辦，添加@Url.Action("Action","Controller")吧。但是發現這里沒法添加，所以將地址都移到了模板頁頂部去，然后在這里調用就OK了。看代碼：
<script type="text/javascript"> var requestUrl = { getOrderById: '@Url.Action("GetOrderById", "Orders")', hangOrder: '@Url.Action("HangOrder", "Orders")', orderList: '@Url.Action("List", "Orders")' }; </script>
這里還是添加了一個javascript，將這個js添加到模板頁，那么所有繼承模板頁的頁面要用到的地址都可以寫在這里，然后在自己的頁面調用地址就好了。我們的例子中調用的就是這個js中的requestUrl內的getOrderById。這下看清楚了吧！
這樣，將JQuery Ajax 與 Knockout.js的結合應用到項目中，就OK了。然后在success中將返回的數據進行一下處理就好了。