KnockoutJs系列(2)-Interactive Arra

在上篇文章當中介紹了 KnockoutJs，它使用一種清晰的資料模型協助您建立更豐富的使用者互動介面（UI），在本文中將用上次示範的observableArray來做一個互動功能，可以新增刪除資料。如有不清楚的，大家可以先看前一篇文章：KnockoutJs 系列(1)-observableArray。

 

KnockoutJs互動功能：新增刪除資料

 

首先一樣載入Jquery和knockoutjs，及bootstrap的樣式。

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>

 

新增一個陣列裡面包含3個json，然後用jquery的push()方法新增一筆資料，及用remove()方法刪除一筆資料，一樣要記得宣告 ko.applyBindings()方法。

 

function viewModel(argument) {

       var self = this;

       self.users = ko.observableArray([

           { name: 'Brad' },

           { name: 'John' },

           { name: 'Mike' }

       ]);


       self.addUser = function (argument) {

        self.users.push({name:$('#newUser').val()});

       }

       self.removeUser = function (argument) {

        self.users.remove(this);

       }

   }

   ko.applyBindings(new viewModel());

 

Html顯示出畫面，我們引用bootstrap讓畫面好一些。

 

陣列名稱：

 

data-bind="foreach: users"

 

陣列細項： $index表示陣列index

data-bind="text: $index" 

data-bind="text: name"

 

綁定click事件

 

data-bind="click: $parent.removeUser"

 

<div class="container">

       <h4>usesrs</h4>

       <table class="table table-striped">

           <thead>

               <tr>

                   <th>Index</th>

                   <th>Name</th>

               </tr>

           </thead>

           <tbody data-bind="foreach: users">

               <tr>

                   <td data-bind="text: $index"></td>

                   <td data-bind="text: name"></td>

                   <td><a href="#" class="btn btn-danger" data-bind="click: $parent.removeUser">Remove</a></td>

               </tr>

           </tbody>

       </table>

       <input type="text" id="newUser">

       <button class="btn btn-primary" data-bind="click: addUser">Add User </button>

   </div>

顯示如下：

 

 

新增一人：

 

刪除原本編號1.編號2：

 

 

以上是關於Knockout 應用的分享，更多電商營運知識，別忘了訂閱我們的電子報，以及追蹤我們的Facebook粉絲專頁！

相關文章：KnockoutJs 系列(1)-observableArray