文章彙整

KnockoutJs系列(2)-Interactive Arra

Astral WebBy Astral Web 1 year agoNo Comments
首頁  /  網站設計與開發  /  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

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。