2/09/2007

In-plcae-editing by Rails


ㄜ,其實真的很難解釋什麼叫做 in-place-editing 這個 AJAX 效果,簡單講就是你可以直接編輯畫面上某些欄位,而不用進入專門編輯的頁面,上圖就是最典型的效果。

這個效果廣泛的使用在 Flickr 以及其他的 AJAX 網頁。由於太過方便,常用,所以 script.aculo.us 就有這個效果,Rails 也對這個效果寫了相當方便的 Javascript Helper,並且做出一個相當完善的整合。雖然這個功能在 Rails 2.0 裡面即將被取消內建,轉為 plugin 形式,但是由於日常生活使用到的機會也蠻多的,我還是第一個 AJAX 效果就介紹這個。Ruby on Rails 上面要使用 in-place-editing 是相當相當方便的。一共有三步,我們假設我們想 in-place-editing abc model 裡面的 name column。

第一步:加入相關 Lib
在 HTML head 裡面加入相關 Javascritp Lib
javascript_include_tag :defaults


第二步:View
在view 裡面,你需要 in-place-editing的位置,加入相關 in-place-editor 的 field
in_place_editor_field 'abc' , 'name'


第三步:Controller
在你的 controller 裡面,加入 in-place-editor 的宣告
class AbcController < ApplicationController
in_place_edit_for :abc , :name
end


沒錯,不多不少三步就好。沒有任何 Javascript 宣告,只有簡潔有力的 Rails Style Coding,很棒吧。

中文化

如果你想將裡面內建的 ok , cancel 改成中文的話,請在 view 裡面使用
in_place_editor_field 'abc' , 'name' , {} , :save_text => '儲存' , :cancel_text => '取消' , :loading_text => '儲存中'
即可變成中文字。

多個 column in-place-editing

如果你想要一個 controller 有多個 in-place-editing 的 column,這裡就有點不方便了,可能必須要這樣寫
class AbcController < ApplicationController
in_place_edit_for :abc , :name
in_place_edit_for :abc , :nickname
end

延伸閱讀

3 則留言:

ABON 提到...

in_place_editor_field 'product','description', :save_text => '儲存' , :cancel_text => '取消' , :loading_text => '儲存中' ,:rows=>8, :click_to_edit_text=> '點這裡編輯'

我在view裡面是這樣寫的
不知道為什麼 save_text之後的功能全部都沒有出現 是我有語法還是其他設定的錯誤呢

thegiive 提到...

Sorry,寫錯了。請看我更正過的版本。

CFC 提到...

請參考這篇文章:
http://zusocfc.blogspot.com/2007/03/rails-inplaceedit.html
我有寫上一個小技巧:P