[Javascript]knockout.js - 資料處理-清單呈現方式

在第一篇有提到如果你的Web應用主要再處理一些CRUD，那很適合用knockout.js來實現MVVM架構，後續介紹了屬性、事件的控制，這篇就要來介紹在knoctout.js對於資料的顯示及處理。

foreach

foreach可以綁定一組Array資料，只要很簡潔的程式碼，就能輕鬆的完成多筆顯示的功能，

首先，我們定義一個使用者的class，包含他的序號、姓名

再來到ViewMode去繫結這個User的陣列資料，而給值的方式跟以往不一樣，observableArray()主要用來繫結陣列，如果你這個陣列資料有任何變動，如新增、刪除，他會自動同步到UI的顯示。

接著我們新增假資料，讓頁面載入就有三筆資料

HTML部分才是強大的地方！只要用以下指定方式即可！

Table 呈現方式：

清單呈現方式：

接著我們加入新增和移除的功能，程式很單純，可往下看完整程式碼應該很好懂，要特別注意的是，如果我們要針對某列做處理，可以用$parent這個參數來取得父元素，如下圖，在某列點選移除，取得該列的TR，則可針對這筆TR做處理：

除了$parent外，還有以下方式：

$parents – 抓取所有外部的元素 ex :

$parents[0] - 此元素的父類別，以此例來說即為 TR (等同於$parent)

$parents[1] - 此元素的父類別的父類別(好饒舌)，以此例來說即為 tbody …以此類推

$root - 抓取最外層的元素，以此例來說即為 body ，(等同於$parents[$parents.length-1])

以下附上新增&刪除的完整程式碼：

<!DOCTYPE html>
<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.7.2.min.js"></script>
    <script src="Scripts/knockout-2.1.0.debug.js"></script>
</head>
<body>
    <button data-bind="click: AddUser">Add</button>
    <button id="btn_json">Json</button>
    <fieldset>
        <legend>Table 呈現</legend>
        <table>
            <thead>
                <tr>
                    <th>Number</th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: users">
                <tr>
                    <td data-bind="text: Index"></td>
                    <td data-bind="text: firstName"></td>
                    <td data-bind="text: lastName"></td>
                    <td>
                        <button data-bind="click: $parent.RemoveUser">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </fieldset>
    <fieldset>
        <legend>清單呈現</legend>
        <ul data-bind="foreach: users">
            <li>
                <span data-bind="text: Index">:</span>
                <span data-bind="text: firstName"></span>
                <span data-bind="text: lastName"></span>
                <button data-bind="click: $parent.RemoveUser">移除</button>
            </li>
        </ul>
    </fieldset>

    <script type="text/javascript">

        //定義使用者
        var User = function (Index, firstName, lastName) {
            var self = this;
            self.Index = Index;
            self.firstName = firstName;
            self.lastName = lastName;
        }

        //ViewModel
        var viewModel = function () {
            var self = this;
            self.users = ko.observableArray();
            //新增使用者事件
            self.AddUser = function () {
                var index = self.users().length + 1;
                model.users.push(new User(index, "Kyle", "Shen" + index));
            }
            //移除使用者事件
            self.RemoveUser = function () {
                self.users.remove(this);
            }
        }

        //手動新增3筆假資料
        var model = new viewModel();
        for (var i = 1; i <= 3; i++) {
            model.users.push(new User(i, "Kyle", "Shen" + i));
        }
        ko.applyBindings(model);

    </script>
</body>
</html>