每天一剂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::Migration
  def 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
    end
  end

  def self.down
    drop_table :contacts
  end
end

然后运行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 %>

  <%= column.human_name %>:
  <%= in_place_editor_field :contact, column.name %>

<% 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.name
end

这样自动为每个字段生成set_contact_attr()方法了，现在访问页面看看效果吧！

6，更改InPlaceEditor的输入框的样式
参考 Rails Framework Documentation的方法API即可
例如这里我们可以让输入框改为5行15列的textarea:

<% for column in Contact.content_columns %>

  <%= column.human_name %>:
  <%= in_place_editor_field :contact, column.name, {}, {:rows => 5, :cols => 15} %>

<% end %>

<%= link_to 'Back', :action => 'list' %>

或者我们直接更改CSS做更细节上的修改:

.inplaceeditor-form input[type="text"] {
  width: 260px;
}