小喵從開始接觸到WebAPI 與 黑大分享的knockout.js 之後,一直就想這兩個絕配的東西應該可以激起很棒的火花。小喵這一篇,就記錄一下如何透過 jQuery 的 getJSON 取得 WebAPI的JSON物件後,再透過 knockout.js 將資料綁定到一個
裡面。
緣起:
小喵從開始接觸到WebAPI 與 黑大分享的knockout.js 之後,一直就想這兩個絕配的東西應該可以激起很棒的火花。小喵這一篇,就記錄一下如何透過 jQuery 的 getJSON 取得 WebAPI的JSON物件後,再透過 knockout.js 將資料綁定到一個 <table> 裡面。
範例說明:
小喵預先準備好一個北風 Product 的 WebAPI,在一個HTML檔案中,放個按鈕,並準備好一個讓JSON綁定的<table>,希望可以按下按鈕後,透過jQuery的 getJSON,從WebAPI取得資料,並將資料綁到<table>裡面
首先,在Header中準備好引用 jQuery 與 knockout 這兩個 Library
<script src="../Scripts/knockout-3.0.0.js"></script>
接著,準備好HTML Body中要綁定的<table>
<thead>
<tr class="dh">
<th>ProductID</th>
<th>ProductName</th>
<th>SupplierID</th>
<th>CategoryID</th>
<th>QuantityPerUnit</th>
<th>UnitPrice</th>
<th>UnitsInStock</th>
<th>UnitsOnOrder</th>
<th>ReorderLevel</th>
<th>Discontinued</th>
</tr>
</thead>
<tbody data-bind="foreach:oProds" class="tbd">
<tr class="dl">
<td data-bind="text: ProductID"></td>
<td data-bind="text: ProductName"></td>
<td data-bind="text: SupplierID"></td>
<td data-bind="text: CategoryID"></td>
<td data-bind="text: QuantityPerUnit"></td>
<td data-bind="text: UnitPrice" class="dlr"></td>
<td data-bind="text: UnitsInStock" class="dlr"></td>
<td data-bind="text: UnitsOnOrder" class="dlr"></td>
<td data-bind="text: ReorderLevel" class="dlr"></td>
<td data-bind="text: Discontinued"></td>
</tr>
</tbody>
</table>
剩下的,就是撰寫jQuery 按鈕按下後,透過 getJSON 取得 相關資料,在取得成功時,透過 ko.observableArray 將接到的資料轉成 ViewModel 的物件名稱 oProds,並呼叫 ko.applyBindings(viewModel) 將資料綁上去。
$.getJSON('http://localhost:4391/api/products', null, function (oProdsData,status,xhr) {
var viewModel = {
oProds: ko.observableArray(oProdsData)
};
ko.applyBindings(viewModel);
});
});
程式碼很短,以下是它的全貌:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/knockout-3.0.0.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
$.getJSON('http://localhost:4391/api/products', null, function (oProdsData,status,xhr) {
var viewModel = {
oProds: ko.observableArray(oProdsData)
};
ko.applyBindings(viewModel);
});
});
});
</script>
<style type="text/css">
.dh {
background-color:darkblue;
color:yellow;
font-size:14px;
}
.dl{
font-size:12px;
}
.dlr{
font-size:12px;
text-align:right;
}
.tbd{
background-color:#fffda2;
}
</style>
</head>
<body>
<form action="" method="post" id="form1" name="form1">
<input type="button" id="btn1" value="取得資料" />
<table border="1">
<thead>
<tr class="dh">
<th>ProductID</th>
<th>ProductName</th>
<th>SupplierID</th>
<th>CategoryID</th>
<th>QuantityPerUnit</th>
<th>UnitPrice</th>
<th>UnitsInStock</th>
<th>UnitsOnOrder</th>
<th>ReorderLevel</th>
<th>Discontinued</th>
</tr>
</thead>
<tbody data-bind="foreach:oProds" class="tbd">
<tr class="dl">
<td data-bind="text: ProductID"></td>
<td data-bind="text: ProductName"></td>
<td data-bind="text: SupplierID"></td>
<td data-bind="text: CategoryID"></td>
<td data-bind="text: QuantityPerUnit"></td>
<td data-bind="text: UnitPrice" class="dlr"></td>
<td data-bind="text: UnitsInStock" class="dlr"></td>
<td data-bind="text: UnitsOnOrder" class="dlr"></td>
<td data-bind="text: ReorderLevel" class="dlr"></td>
<td data-bind="text: Discontinued"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
按下按鈕前
按下按鈕後
末記:
Knockout的這種資料綁定的方式,讓畫面與Javascript可以不必緊緊相依,寫JavaScript(jQuery)的時候,不必去顧慮html的Dom長什麼樣,將JS與HTML抽離的乾淨,真是漂亮~
小喵自己做一下學習筆記紀錄,也順便提供給網友參考
^_^
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考