Backbone.js 的 Router

Backbone.Router 的主要功能是能夠在不刷新頁面的情況下, 變更 URL, 同時執行不同的功能。不論建立幾個 Router 物件, 要啟作用時都必須呼叫 Backbone.history.start()。

• 屬性 routes: 用來設定 routes hash 對應的動作 ( actions, functions )。
• 方法 initialize: 初始化呼叫, 自行定義。建立 Router 物件時若傳入 Object 物件, 讓物件會視為 routes 的設定。
• 方法 route: 動態設定 routes hash 對應的動作。
• 方法 navigate: 呼叫此方法以變更 URL。第一個參數為字串, 第二個參數為 Object 物件。Object 物件屬性 trigger 設定為 true 時, 表示要呼叫 route function。Object 物件屬性 replace設定為 true 時, 表示不留在 history 裡。

呼叫 Backbone.history.start() 時傳入的 Object 物件屬性可以有三個:

• 屬性 pushState: 設定為 true 時表示使用 HTML5 的 pushState 功能, 將不會在 URL 使用 # , 這通常需要做後端 URL mapping 設定。
• 屬性 root: 如果路徑不是 / 可以使用 root 設定。 
• 屬性 silent: 如果不願在初始化時呼叫 route function, 把 silent 設定為 trrue。

在 IE 建議不要使用以上三個屬性設定... 囧。

Backbone.js 的 View

在 Backbone.js, View 經常會和 Model 做關聯, 在這裡先排除 Model, 單純討論 View 的其它功能。

• 屬性 el: 用來表示對應的頁面元素 (element), 其值為字串類型, 可以是標籤名稱或 id 名稱等 selector。
• 屬性 tagName: 表示新 View 物件初始的標籤。
• el 和 tagName 兩者為二選一設定。
• 屬性 $el: 為對應 element 的 jQuery (或 Zepto) 物件。
• 屬性 $(selector): 對應子元素的 jQuery (或 Zepto) 物件。
• 屬性 events: 定義事件 (及事件來源) 對應事件處理的方法。常用的事件: click, dblclick, contextmenu, mouseover, mouseout。

• 方法 initialize: 初始化的方法, 定義類別時定義。有別於 constructor, 在此不建議使用 constructor。建立 View 物件時, 傳入一個 Object 物件, 會將 Object 的屬性複製給 View 物件。
• 方法 render: 物件成形的方法, 定義類別時定義。應回傳物件本身 (this)。
• 方法 remove: 方便從 DOM 將 View 物件移除。同 $(view.el).remove()。
• 方法 make: 方便由標籤名稱、屬性 (包成 Object )、內容字串, 建立 element。
• 方法 delegateEvents: 設定事件 (及事件來源) 對應事件處理方法。通常只要定義屬性 events 即可完成自動設定, 而無需手動呼叫此方法。
• 方法 undelegateEvents: 取消所有設定事件 (及事件來源) 對應事件處理方法。當要讓 View 物件失能, 或暫時從 DOM 移除時, 可以呼叫此方法。

jsonTrace 小工具修正

jsonTrace 專案 (之前的介紹) 修正了臭蟲, 之前使用遞迴真是不智的選擇, 改成使用陣列, 不會有 stack overflow 的問題了。另外, 可以設定格式化的空白。README.md 有簡要的說明。
註: commit message 居然打錯字 =..=

JRuby 1.6 同時支援 Ruby 1.8 和 1.9

JRuby 1.6.7 同時支援 Ruby 1.8.7 和 1.9.2
在 Windows 上安裝的方式:

1. 解壓縮至 C:\ 為 C:\jruby-1.6.7
2. 設定環境變數 JRUBY_HOME 為 C:\jruby-1.6.7
3. 將 %JRUBY_HOME%\bin 加入環境變數 PATH 中
4. 設定環境變數 JRUBY_OPTS 為 --1.9 可以切換為 Ruby 1.9.2 相當的功能。預設為 1.8.7。

命令列上輸入 jirb 開啟 irb 環境
命令列上輸入 jirb_swing 開啟視窗 irb 環境

AS-PHP-talk 簡介

AS-PHP-talk 放到 github 後, 不知不覺已經過了一年 =..=, 突然想來寫個介紹。

這個專案的目的是為了讓 ActionScript 和 PHP 溝通有另一種較為簡單的選擇, 目前後端只有 PHP 的實作。 以往後端 ( 筆者較常使用 PHP ) 和 AS 溝通, 比較舊的方式是通過 XML, 比較多人用的是透過 AMF ( Flash remoting ), AS-PHP-talk 則是使用 JSON。

JSON 和 XML 相比的話, 同樣都是文字格式。XML 可以制訂的資料比較複雜; 然而, JSON 可以描述 Object、Array 和基本類型的資料 , 其實已經很夠用。

JSON 和 AMF 相比的話, AMF 體積應該會比較小, 但由於 AMF 是二元資料, 除錯相對於文字格式的 JSON 要來得麻煩。JSON 資料可以直接秀在網頁上, 有錯誤時也可以在網頁上就查覺。

前端和後端資料交換的程式, 最麻煩就是除錯。AS-PHP-talk的目的是, 可以在完全沒撰寫前端程式 ( Flash ) 之前, 利用簡單的網頁就達到後端 PHP 程式的除錯。後端的開發人員可以完全不用理會前端程式的開發進程; 前端的開發人員也可以透過簡單的後端 ( 送假資料 ) , 進行前端的開發。前、後端的程式可以很方便的切開來。

在 Chrome 開發人員工具裡動態載入外部 JS libs

如何在 Google Chrome 開發人員工具裡, 動態載入外部 JS libs ?
qop 在 StackOverFlow 找到這篇 how to: dynamically load google ajax api into chrome extension content script 。
打開 Developer tools [ Ctrl + Shift + i ], 於 Console 內貼上以下的程式碼就可以在 Console 做些 Underscore/Backbone 練習 ^_^

var headElement = document.getElementsByTagName("head")[0];
var jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
headElement.appendChild(jsElement);
// ---
jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://documentcloud.github.com/underscore/underscore-min.js';
headElement.appendChild(jsElement);
// ---
jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://documentcloud.github.com/backbone/backbone-min.js';
headElement.appendChild(jsElement);

Hello Backbone.js 用 CoffeeScript 改寫

Hello Backbone.js 是不錯的 Backbone.js 入門教學, 為了個人學習 CoffeeScript, 所以把裡面的例子都以 CoffeeScript 重新改寫, 希望可以一石兩鳥。執行使用的 JS lib 除了多了 http://jashkenas.github.com/coffee-script/extras/coffee-script.js 之外, 其餘只有版本上的差異。這篇主要的目的是做個人的學習過程記錄。

Backbone.Events

Backbone.Events, CoffeeScript 對照寫法

JavaScript ------------------------------------------------

var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
  alert("Triggered " + msg);
});
object.trigger("alert", "an event");

CoffeeScript ------------------------------------------------

obj = _.extend {}, Backbone.Events
obj.on 'alert', (msg)->
  alert 'Triggered ' + msg
obj.trigger 'alert', 'an event'

Backbone.js 與 CoffeeScript

參考了一些 Backbone 搭配 CoffeeScript 的文章:

• Using Backbone.js with CoffeeScript
• CoffeeScript with Backbone.js Example

之後, 將 Backbone 範例 Todos 改用 CoffeeScript 重寫練習, 果然一開始就踩到地雷。
改寫之後, 是完全不會動的, 後來發現 initialize 方法根本沒被觸發, 但 constructor 有被觸發, 把 constructor 註解後就可以了。也就是使用 initialize 方法, 而不用 constructor。

另外, Backbone 原本的繼承寫法是呼叫 extend 方法, 除了改用 extends 繼承寫法之外, 其初設物件 (第一個參數), 可以放到 initialize 方法裡做初始化的動作。

CoffeeScript.js

感覺最近一兩年, JavaScript lib 發展的速度相當快, 在 Nodejs 問世之後, JS 更是如虎添翼。但個人對 JS 的 OO 寫法相當不適應, 因此看上了 CoffeeScript, 最近就學點基本語法。在還沒有接觸 CoffeeScript 之前, 會覺得寫某種程式語言再編譯成 JS, 有脫褲子放屁之疑慮。試用後發現, CoffeeScript 真的比較易讀易寫, 代價就是要學點新語法, 當然這問題是見仁見智, 因人而異。

一開始我會在網頁裡使用 <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> , 如此一來就可以在 <script type="text/coffeescript"></script> 裡寫 CoffeeScript (或者 <script type="text/coffeescript" src="my.coffee"></script>  )。

單單學語法其實很無聊的, 試著改 Backbone.js 上的 todos 範例, 先將 backbone-localstorage.js 改寫成 backbone-localstorage.coffee, 結果發現一直抓不到 Store 類別, 裡面包括了兩個問題:

1. 混用 todos.js 和 backbone-localstorage.coffee, 但 backbone-localstorage.coffee 被編譯成 JS 是比較慢的, 因此 .coffee 的內容是比較慢執行的。解決的方式是, 先編譯成 JS。
2. CoffeeScript 的所有變數都會被包在 local 裡, 所以類別要定義為 global 時可以使用 '@' 或 'window.'。原來的 Store 類別要使用 window.Store 或 @Store 去定義。