每天一剂Rails良药之In-Place Form Editing
看看蛙眼的博客分类管理，有点In Place Editing的意思，是否让用户感觉更方便呢？Rails有许多很小的好处，让人欲罢不能。
今天来看看Rails使用script.aculo.us让In Place Editing更简单，让你的应用更加Web2.0
1，新建Rails项目，配好数据库设置
rails test
2，添加contacts表
ruby script/generate migration AddContactsTable
然后修改001_add_contacts_table.rb:
class AddContactsTable < ActiveRecord::Migrationdef self.up create_table :contacts do |t| t.column :name, :string t.column :email, :string t.column :phone, :string t.column :address_line1, :string t.column :address_line2, :string t.column :city, :string t.column :state, :string t.column :country, :string t.column :postal_code, :string endenddef self.down drop_table :contactsendend
然后运行rake:
rake db:migrate
3，生成Contact的scaffold
ruby script/generate scaffold Contact
4，添加默认的javascript库
修改app/views/layouts/contacts.rhtml，添加以下代码:
<%= javascript_include_tag :defaults %>
5，添加In Place Editing效果
修改app/views/contacts/show.rhtml
<% for column in Contact.content_columns %><p><b><%= column.human_name %>:</b><%= in_place_editor_field :contact, column.name %></p><% end %><%= link_to 'Back', :action => 'list' %>
注意<%= in_place_editor_field :contact, column.name %>这行代码就可以添加In Place
Editing效果，添加一个Contact并查看Show页面，实际上生成一段Javascript代码:
new Ajax.InPlaceEditor(....)
这里是对Contact所有的字段作In Place Editing，我们也可以只指定某一个字段，如:
<%= in_place_editor_field :contact, :name %>
但是现在还不能编辑字段，因为ContactsController没有相应的set_contact_attr()方法
还好Rails有相应的Convention来节省代码，在ContactsController里添加以下代码:
Contact.content_columns.each do |column|in_place_edit_for :contact, column.nameend
这样自动为每个字段生成set_contact_attr()方法了，现在访问页面看看效果吧！
6，更改InPlaceEditor的输入框的样式
参考Rails Framework Documentation的方法API即可
例如这里我们可以让输入框改为5行15列的textarea:
<% for column in Contact.content_columns %><p><b><%= column.human_name %>:</b><%= in_place_editor_field :contact, column.name, {}, {:rows => 5, :cols => 15} %></p><% end %><%= link_to 'Back', :action => 'list' %>
或者我们直接更改CSS做更细节上的修改:
.inplaceeditor-form input {width: 260px;}
页:
[1]