Category: JavaScript

Use Backbone.Paginator to create pagination for table layout HTML

我們教會人手非常不夠，也不見得有工程背景的人，所以很多東西都是簡單就好。
像是主日的錄音檔好了，我們的標準流程是用 Dreamweaver 修改表格，一個禮拜就會多上三個錄音檔，簡單算起來，一年就會有 156 個 entry 會放到頁面中。

例如說

<tr onMouseOver="mark(this,'#ECFBD4','#990000')" onMouseOut="mark(this,'#FFFFFF','#333333')" >
  <td align="center" valign="top">2013.01.20</td>
  <td align="center" valign="top">深思天國(一) 心決定一切</td>
  <td align="center" valign="top">徐坤靖牧師<br /></td>
  <td align="center" valign="top"><a href="http://files.ctfhc.org/sermon/130120.mp3"><img src="images/record.jpg" alt="錄音檔下載" width="120" height="28" border="0" /></a></td>
  <td align="center" valign="top"><a href="http://youtu.be/Y1iSbTN07Cc" target="_blank"><img src="images/video.jpg" alt="線上收看" width="120" height="28" border="0" /></a></td>
</tr>

長久下來之下，這個頁面就包含了 300 個 tr 標籤去顯示每個禮拜的影音檔。

剛好在 JSDC 結束之後，就決定想用 Backbone.js 來在前端用 JavaScript 動手腳，把 table 的每一個 tag 處理好當做 model，最後把 collection 做出來丟給 controller 跟 view。

中間也用了 Backbone.Paginator 幫忙做分頁，簡單的使用方式可以看一下他的範例

最後做出來就會像是

source code 放在 https://bitbucket.org/yhchan/ctfhc-media-pagination，其實東西並不難，只是一開始跟 JavaScript 不熟多花了很多時間而已。而且目前是用 JSONP 在後端把東西用 JSON 丟出來，其實應該可以在前端直接做掉的，但是我現在懶惰了…

比起這種方式，我可能還是希望有一天，我們能自己好好使用好的 CMS 去設計網站吧，2010 年想改用 Drupal，也因為人力的關係胎死腹中…

Filter is good

Java

import org.apache.commons.collections.*;
CollectionUtils.filter(list, new Predicate() {
  public boolean evaluate(Object o) {
    return !((String)o).isEmpty();
  }
});

PHP

$list = array_filter($list, function($s) {return !empty($s);});

Python

l = [x for x in l if x]

JavaScript

l = _.filter(l, function(s){return s.length;});

憑著直覺寫的，如果不能動的話再說 XD
這種寫法通常好讀又簡單，不過有些語言要寫的囉嗦一點…