Knockout.js隨手記(5)

以列表方式呈現數據

   處理以數組形式儲存的多條數據,要先認識foreach。在ViewModel定義一個JavaScript Array或是ko.observableArray() (observableArray在新增或剔除數組元素時,KO會馬上察覺反應到UI,普通Array則不會),而後在某個容器元素(例如: div, ul, tbody... )聲明data-bind="foreach: arrayPropName",就能夠指定KO將容器內的子元素模板(Template)就會對數組對象的數據自動循環遍歷,例如:javascript

<tbody data-bind="foreach: users"> 
<tr> 
<td><span data-bind="text: id"></span></td> 
<td><span data-bind="text: name"></span></td> 
<td><span data-bind="text: score" style='text-align: right'></span></td> 
<td><a href='#' data-bind="click: $root.removeUser">移除</a></td> 
</tr> 
</tbody>

在上面的例子中,咱們假設ViewModel有一個數組屬性—users,其中每筆數據對象都有id, name, score三個屬性,在tbody上宣告data-bind="foreach: users",意味者<tbody>到</tbody>間的內容,會依users數組的元素多寡重複出現n次。而其中元素(如<span>, <a>)繫結對象即是users中的每一條用戶數據,所以只要寫上data-bind="text: id"就能夠對應到用戶的id屬性。最後一個<td>中出現了<a data-bind="click: $root.removeUser">,你必定能夠猜測它可用來移除該用戶數據,$root是一個特殊變量,會指向ViewModel個體。在這裏必須加上的緣由是咱們在ViewModel定義了remoteUser方法,但在<tbody>中,默認綁定的對象是users對象,若只寫data-bind="click: removeUser",KO會誤認成users對象上的removeUser方法。加上$root,KO會改由ViewModel的最上層尋找removeUser方法。html

removeUser的定義以下:java

 

self.removeUser = function(user) { 
self.users.remove(user); 
            }

當它在foreach範圍被點擊觸發時,會接收到一個參數,指向被點擊的那條數據對象。因此,只需self.users.remove(user)就能夠將該條數據從observableArray移除,網頁也會立刻作出迴應,該條數據的<tr>會馬上從<tbody>中消失。jquery

若是要新增用戶數據,在observableArray中加入一條具備id, name, score三個屬性的對象便可,爲了規範組件包含全部必要屬性,咱們將user定義成function模擬ViewModel形式的對象:數組

 function UserViewModel(id, name, score) { 
            var self = this; 
            self.id = id; 
            self.name = name; 
            self.score = score; 
        }

如此新增數據時便可寫成viewModel.users.push(new UserViewModel("0001", "halower", 125)),爲了展示KO能夠實時監控obervableArray的風吹草動,咱們寫一個ko.computed計算全部用戶的score總和:app

self.totalScore = ko.computed(function () { 
var total = 0; 
$.each(self.users(), function (i, u) { 
total += u.score; 
    }); 
return total; 
});
並在表格最上方加上
共 <span data-bind="text: users().length"></span> 條, 
合計 <span data-bind="text: totalScore"></span> 分
如此,一旦users數據有所增刪,不但列表表格會立刻反應,筆數及積分統計也會馬上呈現最新結果。

完整代碼以下:

 

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <script src="~/Scripts/jquery-2.0.3.js"></script>
    <script src="~/Scripts/knockout-2.3.0.js"></script>
    <script  type="text/javascript">
        //定義user數據對象
        function UserViewModel(id,name,score) {
            var self = this;
            self.id = id;
            self.name = name;
            self.score = score;
        }
        //定義ViewModel
        function ViewModel() {
            var self = this;
            self.users = ko.observableArray();//添加動態監視數組對象
            self.removeUser = function (user) {
                self.users.remove(user);
            }
            self.totalscore = ko.computed(function () {
                var total = 0;
                $.each(self.users(), function (i, u) {
                    total += u.score;
                })
                return total;
            });
            };
        $(function () {
            var vm = new ViewModel();
            //預先添加一些數據
            vm.users.push(new UserViewModel("d1", "rohelm", 121));
            vm.users.push(new UserViewModel("d2", "halower", 125));
            $("#btnAddUser").click(function () { 
                vm.users.push(new UserViewModel(
                    $("#u_id").val(),
                    $("#u_name").val(),
                    parseInt($("#u_score").val())));
            });
            ko.applyBindings(vm);
        });
    </script>
</head>
<body>
     <section style="margin:250px">
         <section>
         ID<input type="text" id="u_id" style="width:30px">
         Name<input type="text" id="u_name" style="width:30px">
         Score<input type="text" id="u_score" style="width:30px"><br/>
         <input  value="Add" id="btnAddUser" type="button" style="width:200px; background-color:#ff6a00;"/><br/><span data-bind="text: users().length"></span> 條--------------合計 <span data-bind="text: totalscore"></span></section>
       <section>
           <table>
            <thead>
                <tr><th>ID</th><th>Name</th><th>Score </th><th>Option</th></tr>
            </thead>
            <tbody  data-bind="foreach: users">
                <tr>
                    <td><span data-bind="text: id"></span></td>
                    <td><span data-bind="text: name"></span></td>
                    <td><span data-bind="text: score"></span></td>
                    <td><a href='#' data-bind="click: $root.removeUser">Remove</a></td>
                </tr>
            </tbody>
        </table>
       </section>
     </section>
</body>
</html>

 

效果演示:

備註:學習

    本文版權歸你們共用,不歸本人全部,全部知識都來自於官網支持,書本,國內外論壇,大牛分享等等......後續將學習knockout.js的經常使用功能。this

                                                                  若是你喜歡本文的話,推薦共勉,謝謝!spa

相關文章
相關標籤/搜索