KnockoutJs 系列(1)-observableArray

KnockoutJs 簡介

Knockout 是一個JavaScript函式庫，它使用一種清晰的資料模型協助您建立更豐富的使用者互動介面（UI）.任何時間您需要動態的更新您UI的部分，例如：當使用者執行了一個動作或外部資料來源有所異動，『KO』 可以幫您簡化並實踐。（註：KO = Knock Out）
其他角度看Knockoutjs，您可以把它想成：提供一個簡單的方法讓UIs編輯JSON Data，今天我們要來實現的是陣列：

首先，先載入Jquery 和knockoutJs

<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>

 

接著 <script>中放入資料陣列，一個陣列只有人名(userArray1)，一個陣列包含json資料(userArray2)。

ko.observableArray() 是knockoutjs的陣列方法，然後要實現這個方法不可或缺的是使用

ko.applyBindings();

<script>

   var userArray1 = ko.observableArray([

       'Duke', 'Elton', 'Greg'

   ]);

   var userArray2 = ko.observableArray([

       { firstName: 'Abel', lastName: 'Smith' },

       { firstName: 'Bill', lastName: 'Johnson' },

       { firstName: 'Chester', lastName: 'Davis' }

   ]);


   ko.applyBindings();

   </script>

 

然後在html將資料展現出來：

綁定陣列：

data-bind="foreach:userArray1"

 

 

陣列裡面的細項：

data-bind="text: $data"

 

陣列中json的中的指定值：

data-bind="text: firstName"

 

HTML：

<h1>User List</h1>

   <ul data-bind="foreach:userArray1">

       <li data-bind="text: $data"></li>

   </ul>

   <table>

       <thead>

           <tr>

               <th>First name</th>

               <th>Last name</th>

           </tr>

       </thead>

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

           <tr>

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

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

           </tr>

       </tbody>

   </table>

 

結果如下：

 

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

 

延伸閱讀：

closure-compiler︰產生最佳化（最小化）的JavaScript 程式碼