分類: 未分類

jQuery.tmpl

2012 年 10 月 14 日2021 年 3 月 12 日日落尚無留言

之前提到用 jQuery 的 clone() 複製一列表格，再用 text() 修改該列的文字內容，但這個方法會經過多次 DOM 處理，效率不高。

經過阿育推薦後，發現 jQuery.tmpl() 樣板引擎還不賴，用起來不難且程式碼看起來會乾淨很多。

先定義表格一列的樣板：

<table id="target-table"> </table>

<script type="text/x-jquery-tmpl" id="row-template">
  <tr>
    <td>${name}</td>
    <td>${comment}</td>
  </tr>
</script>

在樣板中文字內容的位置使用 ${VARIABLE} 取代，tmpl() 會解析樣板內容並將資料填入。

接著透過 tmpl() 處理新增一列至表格最後方：

var data = {
   name: 'zeroplex',
   comment: 'some text'
};

$.tmpl( $('#row-template').html(), data)
    .insertAfter('#target-table > tbody > tr:last');

tmpl() 會自動將第二個傳入的參數對應到樣板變數，data.name 會被帶入 ${name}、data..comment 被帶入 ${comment}，最後將處理完畢的資料放入原始頁面中。

Reference:.tmpl() – jQuery API
http://api.jquery.com/tmpl/

JavaScript, jQuery

C 強制資料輸出

2012 年 9 月 18 日2021 年 3 月 12 日日落有 4 則留言

無意間發現透過 printf 輸出資料時，程式會將資料放在 buffer 中，過一段時間後再一起印出。

int main(){
   while(1){
      printf(".");
      sleep(1);
   }
   return 0;
}

可以透過 fflush() 強制將 buffer 中的資料輸出：

while(1){
   printf(".");
   fflush(stdout);
   sleep(1);
}

C/C++, 程式設計

jQuery 在表格新增一列

2012 年 9 月 1 日2021 年 3 月 12 日日落有 6 則留言

學 javascript 沒多久，剛開始只是很簡單的置換文字、為元素加上類別，短短幾行沒什麼感覺。到了開始動態新增表格資料時，javascript 程式碼裡面參雜 HTML 就越看越噁心。

function addRow( data ){
   $('#user-list > tbody ').append(
         '<tr> ' + 
            '<td>' + id + '</td>' +
            '<td>' + username + '</td>' +
            '<td>' + email + '</td>' +
         '</tr>'
      );
}

這樣的寫法除了可讀性很低以外，之後若修改表格結構以及 CSS 樣式時，必須同時修改樣板以及 javascript 內容，不容易維護。

今天翻了翻 jQuery docs，發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。

先定義一列當作表格樣板，可以在 CSS 將這一列隱藏：

<table border="1">
  <tbody>
    <tr id="template" style="display: none;">
      <td class="id some-other-class"> </td>
      <td class="username"> </td>
      <td class="email"> </td>
    </tr>
  </tbody>
</table>

新增一列時，將 template 複製一份出來，再依照 class 名稱將資料填入不同欄位：

function addRow(){
  $('tr:last').after( $('#template').clone().removeAttr('id') );
  $('tr:last > td.id').text( id );
  $('tr:last > td.username').text( username );
  $('tr:last > td.email').text( email );
}

HTML, JavaScript, 網頁設計

COSCUP 記趣

2012 年 8 月 30 日2021 年 3 月 12 日日落有 2 則留言

今年是我參加 COSCUP 的第四年、加入志工的第三年，學到新技術也交了不少志同道合的朋友，參加了社群活動真的讓生活改變了不少。

平時拼作業、報告、考試和專題，爆肝有餘去玩玩社團，閒來沒事再上開心農場晃晃，蠻平淡的學生生活。經由 cookys 邀請，才知道玩電腦也能聚在一起辦活動，參加了 COSCUP 2009。

pingooo 所言不假，COSCUP 真的是 40% 聽演講、60% 交朋友。在聽到 Jserv 大神的「Virsualization Goes Mobiles」後呆住，索性打開座位表，星夜如雨就坐在我隔壁，原來就是你在開心農場塞了 700 多個石榴給我！

之後課餘時間會多留意各地社群活動。一次在默契等 Mac 自由聚，閒來沒事上噗浪晃晃，突然隔壁的人拍拍我肩膀：「你好，我是 MrMoneyC！」促成了 SA@台中。

參加社群活動受惠頗多，所以有餘力就加入志工，希望活動能繼續辦下去。

廢話半天，還是回去乖乖的把照片整理完吧 (逃)

ps. 搶到 COSCUP 2010 的門票，貼上來紀念一下 XD

COSCUP, 生活雜記

wget 中文亂碼問題

2012 年 8 月 13 日2021 年 3 月 12 日日落尚無留言

這幾天為了某事情用 wget 砍站，但因為對方目錄使用中文命名，wget 遇到中文不但網址錯誤，連檔案名稱的文字也變成亂碼。

原因是 wget 對國際語言的支援不夠完整，判斷 URL 中的特殊字元後在轉成檔名儲存，而遇到中文字時轉換會錯誤。目前官方是出的版本沒有辦法使用參數或設定繞過這個問題，但可以透過修改程式碼再重新編譯解決。

先從 GNU Wget 網站上將 source 抓回來。開啟 wget-1.x/src/url.c，找到以下程式片段：

quoted = 0;
   for (p = b; p < e; p++)
     if (FILE_CHAR_TEST (*p, mask) )
       ++quoted;

改成：

quoted = 0;
   for (p = b; p < e; p++)
     if (FILE_CHAR_TEST (*p, mask) && !((*p | 0x0fffffff) == 0xffffffff) )
       ++quoted;

存檔後重新編譯：

$ ./configure
$ make

完成後用剛編譯完成的 wget 來抓檔案：

$ ./wget-1.x/src/wget -np -r http://path.to/your/檔案名稱/

Reference:

wget中文乱码 – 互联网络 – c – Linux – Wget – 自说Me话
 http://isayme.com/2011/07/fix-wget-for-zh-cn/

wget中文乱码 | 可可熊的窝
 http://cocobear.info/blog/2008/04/19/wget-chinese-encode/

Linux, 分享