JQuery

Backbone.js Event 事件，介紹 Event 之前，大家可以先看看 Backbone.js 的初學介紹，該教學文件可以學習如何載入 Backbone.js library，利用此套件如何去制定各種事件。Backbone.js 提供了3個 method 去控制事件產生、移除、執行，分別是 on(bind)、off(unbind)、trigger。文字上寫得很清楚 on 就等於 bind，off 就是 unbind，最後就是如何去 trigger 事件。底下就來簡單舉例:

既上一篇作者寫了 Javascript 前端工具 Backbone.js Framework 初學介紹，這次來將程式改寫成 jQuery 寫法，藉這個機會來介紹 jQuery 新功能 on API，底下來看看 jQuery event handle 的演進

//在 jQuery 1.3 以上版本
$(selector).live(events, data, handler);
//在 jQuery 1.4.3 以上版本 
$(document).delegate(selector, events, data, handler);
//在 jQuery 1.7 以上版本
$(document).on(events, selector, data, handler);

PHP, Ruby, Python .. 等語言都已經相當熟悉，進階開發者也都接觸了好用的後端 Framework 如 CodeIgniter, CakePHP, Django, Ruby on Rail, Yii, Symfony .. 等，用 Framework 最大的好處並不是在 Framework 提供了大量工具，而是制定了 MVC 架構，讓專案多位開發者可以遵循，上了講了這麼多後端 MVC Framework，那麼前端呢？接下來介紹前端強大工具: Backbone.js

什麼是 Backbone.js 簡單來說 Backbone.js 就是一套前端 Javascript Framework，它提供 MVC 架構，相信大家都玩過後端 MVC，那至於前端呢，好像比較少人提到，這就是介紹 Backbone.js 最主要的目的。Backbone.js 包含了 Model View Controller 來讓使者操作，Model 提供了key-value 結構，以及可以 binding 大量 event，開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。如果想瞭解 Backbone.js 線上文件可以參考

GitHub 網站，如果想瞭解程式碼可以參考 source code 註解。

近期在幫公司導入 Backbone.js 技術，把後台全面改寫成 Javascript MVC 架構，技術包含 jQuery + Backbone.js + Underscore.js + Mustache Template，這些技術我想可以寫另外一篇 Backbone.js 初體驗，這邊就先不多說了，在 Backbone.js 的 View 架構裡，可以任意 bind events，程式碼如下:

RT.View = Backbone.View.extend({
initialize: function() {   
    if (this.model) {
        this.model.bind("change", this.render, this);
    }
    if (this.collection) {
        this.collection.bind("all", this.render, this);
    }
},

events: { 
  'click .add': 'add',
  'click .edit': 'edit',
  'click .delete': 'delete_item',
  'click .delete_all': 'delete_all'
},
add: function(e) {
},
)};

上面程式碼可以看到，將 click 事件綁在不同 Class 上，但是問題來了，如果同時 new 兩個 RT.View 物件，當我觸發 click 事件時，就會發生兩次一樣的效果，該如何解決這問題呢，可以透過 jQuery 的 stopPropagation 或 stopImmediatePropagation，這兩個其實很好區分，前者只會防止目前 Dom Tree 的上一層事件，後者則是會防止全部 Dom Tree 事件。

程式設計師在網頁表單上通常會設計很多提示的功能，而在 Html5 提供了 placeholder attribute 這功能，目前 FireFox Safari Google Chrome 都沒有顯示上的問題，唯獨 IE8(含以下)都沒辦法顯示這功能，所以必須透過 javascript 來解決這部份問題了，網路上找到這篇解決方式，底下是原始碼

CoffeeScript 的程式碼：

add_placeholder = (id, placeholder) ->
    el = document.getElementById(id)
    el.placeholder = placeholder

    el.onfocus = () ->
        if(this.value == this.placeholder)
            this.value = ''
            el.style.cssText  = ''

    el.onblur = () ->
        if(this.value.length == 0)
            this.value = this.placeholder
            el.style.cssText = 'color:#A9A9A9;'

    el.onblur()

# Login Form
add_placeholder('myInputField', 'IE Placeholder Text')

$("#input_id").attr("placeholder")

在網頁裡面用 Select 是很常遇到的，之前也寫了一篇如何利用 jQuery 動態增加 option 或取值，jQuery 部份就不介紹了，那是需要搭配 jQuery Plugin: Select box manipulation，今天要介紹的是如何用 javascript 動態取值或者是增加 option 選項。因為我發現有使用者直接利用 innerHtml 的方式來把資料塞入到 Select 裡面，雖然 FireFox 或 Chrome 都可以正常運作，但是遇到 IE 還是沒辦法動。

如何取得 select element 底下很多方法可以取得 select element: 1. 透過 form name + element name

document.myform.selectname

document.myform.elements

document.getElementById("selectid")

在這裡跟大家推薦一本國外的書籍，也就是 Elated.com 網站作者 Matt Doyle 推出的一本新書 Master Mobile Web Apps with jQuery Mobile，此作者也有推出 PHP 及 Photoshop 的書籍，本人相當佩服有美工天份又會寫程式人才。然而現在當紅的 Mobile Device，大家相繼為了 iOS, Android 或其他手持式裝置撰寫 Web 介面，目前網路上大家推的其中一套就是 jQuery Mobile，而我呢，正在摸索另一套強大的 Web App Framework: Sencha Touch，功能來比的話，個人覺得 Sencha Touch 優勢比較多，之後有機會再來寫一系列的 Sencha Touch 文章。此書有提供目錄可以參考，該作者會教大家如何搭配 PHP 跟 MySQL 結合 jQuery Mobile API 來撰寫程式，書籍應該是蠻完整的，目前售價美金19元，如果有興趣的人可以上網下單。

Update: 補上 OSDC 紀錄影片 2011.06.26 今年很高興可以北上參加 OSDC 2011 (Open Source Developers Conference)，由於之前都在南部唸書及工作，沒有機會北上參加聚會，現在人在新竹，終於有機會可以參加了，雖然早上六點就要起床趕電車了，不過到現場聽課感覺就是不同，也可以認識很多新朋友，底下來紀錄上課筆記

微軟與 jQuery 社群的親密接觸

講者: Eric Shangkuan (Microsoft) Slide: 微軟與 jQuery 社群的親密接觸 這是 OSDC 第一場演講，早上九點就開始了，雖然人不多，但是蠻多人還是為了講者而來，首先介紹什麼是 jQuery，以及 jQuery 一些基本用法，像是 CSS selector，如何在 Windows Visual Studio 上面開發 jQuery 及撰寫 plugin 整合進去 ASP.Net，最後介紹三個不錯用的 jQuery Plugin: Templeate, Datalink, Globalzation。

• Templeate: 這搭配 Facebook api 可以直接做個人頁面，請參考這裡
• Globalzation: 前端多國語系實做
• Datalink: 可以快速處理 form，利用 object 跟 jQuery 搭配

如果要研究上述三個 jQuery Plugin 可以參考底下: jQuery Datalink: https://github.com/jquery/jquery-datalink jQuery Templeate: https://github.com/jquery/jquery-tmpl jQuery Globalzation: https://github.com/jquery/jquery-global

HandlerSocket - A NoSQL plugin for MySQL

講者: Jui-Nan Lin (PIXNET) Slide: HandlerSocket - A NoSQL plugin for MySQL 會後有部份聽眾提出了一些問題，PIXNET 也已經回報給 MySQL 請他們修復這些問題，可以參考 gslin 大神回覆的這篇: MySQL HandlerSocket 的情況…，不過 NoSQL 有個缺點就是沒有帳號密碼，這部份蠻好解覺的，因為 DB 都直接放在後面，前面加上防火牆就好了。

之前寫了一篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection)，這次可以來加上 Android 手機版本，其實就是分析瀏覽器 User Agent 來達到目的，底下分享 PHP 跟 Javascript 作法

PHP 方法

if(stripos($_SERVER['HTTP_USER_AGENT'],'Android') !== false) 
{
	header('Location: http://android.xxx.com');
	exit();
}

Javascript 方法

if(navigator.userAgent.match(/Android/i))
{
	window.location = 'http://android.xxx.com';
}

Apache .htaccess 方法 用

Apache mod rewrite 方法

RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://android.xxx.com [R=301]

繼前一篇所寫的『jQuery 偵測瀏覽器版本, 作業系統(OS detection)』，當我們遇到手機上網使用者，可以透過 javascript 來判斷目前使用者瀏覽器以及 OS，iPad user agent 如下:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 我們必須分析上面字串來判斷是否用手機上網，手機網頁跟PC網頁大小一定有所不同，透過底下兩個方法來改變瀏覽器的畫面

• 自動導向手機網頁
• 動態改變 CSS 兩個方法都不錯，如果決定使用前者，建議在 Server side 那邊做判斷，底下先列出 javascript, PHP, .htaccess 判斷檢查

The JavaScript

var isiPad = navigator.userAgent.match(/iPad/i) != null;

The PHP

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

The .htaccess

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]

if(jQuery){
    jQuery("body").addClass("jq");
}

.someClass{
    display:block;
}
.jq .someClass{
    display:none;
}

document.getElementsByTagName("body")[0].setAttribute("class", "js");