iT邦幫忙

DAY 27
2

建立API為中心的輕量級網站系列 第 27

用 knockout.js 實作簡單的分頁功能

  • 分享至 

  • xImage
  •  

一般分頁機制,是每換下一頁就向server請求下一頁,
把整頁的所有元素重傳一次,
透過knockout.js把一次傳來的列表,
做成分頁瀏覽。
在 knockout.js 有個現成的 simpleGrid 可以很快地實作出簡單的分頁功能
http://knockoutjs.com/examples/resources/knockout.simpleGrid.1.3.js
以參加這次鐵人賽的名單為資料並以JSON格式寫在 data.js,
資料內容類似像這樣:

var i5data = [{"username":"toithome","type":"tech","subject":"虛擬化產品使用經驗談"},{"username":"twtw","type":"tech","subject":"建立API為中心的輕量級網站"}];

在HTML的view裡實在是太簡化了,

<div data-bind="simpleGrid: gridViewModel"></div>
<button data-bind="click:toFirstPage">回第一頁</button>
<script src="/js/knockout.simpleGrid.1.3.js" type="text/javascript"></script>
<script src="/data.js" type="text/javascript"></script>

其中data.js內容是JSON格式的資料。
剩下的是程式碼的ViewModel部份:

var viewModel = function(items) {
  var self = this;
  self.items = ko.observableArray(items);
  self.toFirstPage = function() {
    self.gridViewModel.currentPageIndex(0);
  };
  self.gridViewModel = new ko.simpleGrid.viewModel({
    data: self.items,
    columns: [
      { headerText: '帳號', rowText: 'username' },
      { headerText: '組別', rowText: 'type' },
      { headerText: '主題', rowText: 'subject' }
    ],
    pageSize: 10
  });
};

ko.applyBindings(new viewModel(i5data));

其中 ko.simpleGrid.viewModel 比較不易了解,
需參看 knockout.simpleGrid.1.3.js 的內容。
此為看起來的樣子:

這實作的網址在:
http://i5.tagbible.net/paginate.html

系列文章列表


上一篇
knockout.js + 顏色選擇器 改變程式碼底色
下一篇
knockout.js 自行產生新的綁定
系列文
建立API為中心的輕量級網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言