[筆記][knockout][WebAPI]使用 knockout.js 透過 jQuery getJSON 從 WebAPI 取得資料,並 foreach 放入 table 範例

小喵從開始接觸到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>

按下按鈕前

X1

 

 

按下按鈕後

X2

 

末記:


Knockout的這種資料綁定的方式,讓畫面與Javascript可以不必緊緊相依,寫JavaScript(jQuery)的時候,不必去顧慮html的Dom長什麼樣,將JS與HTML抽離的乾淨,真是漂亮~

小喵自己做一下學習筆記紀錄,也順便提供給網友參考
^_^

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)