Rails Recipe实践(one by one) -- In place form editing

要在rails中使用ajax，必须在视图（view）中引用对应的javascript文件，在view文件的< /head>标签中使用<%= javascript_include_tag :defaults %>来引入所有rails自动生成的位于public\script下面的.js文件，也可以使用<%= javascript_include_tag :prototype %>等来引入指定的.js文件，不过为了防止忘记引入，可以把这行代码放到application.rhtml或者某个controller对应的controller_name.rhtml中去。
关于javascript_include_tag的例子
  javascript_include_tag "xmlhr" # =>
    <script type="text/javascript" src="/javascripts/xmlhr.js"></script>

  javascript_include_tag "common.javascript", "/elsewhere/cools" # =>
    <script type="text/javascript" src="/javascripts/common.javascript"></script>
    <script type="text/javascript" src="/elsewhere/cools.js"></script>

  javascript_include_tag :defaults # =>
    <script type="text/javascript" src="/javascripts/prototype.js"></script>
    <script type="text/javascript" src="/javascripts/effects.js"></script>
    ...
    <script type="text/javascript" src="/javascripts/application.js"></script>

现在，就可以使用ajax了，在需要的地方使用in_place_editor_field，由scaffold生成的show.rhtml是一个非常不错的地方，让我们把show.rhtml中的<%=h @contact.send(column.name) %>替换为<%= in_place_editor_field :class_name, :class_attribute %>，让我们看看in_place_editor_field都做了什么，找到它的源代码：

ruby 代码

def in_place_editor_field(object, method, tag_options = {}, in_place_editor_options = {})
 tag = ::ActionView::Helpers::InstanceTag.new(object, method, self)
 tag_options = {:tag => "span", :id => "#{object}_#{method}_#{tag.object.id}_in_place_editor", :class => "in_place_editor_field"}.merge!(tag_options)
 in_place_editor_options[:url] = in_place_editor_options[:url] || url_for({ :action => "set_#{object}_#{method}", :id => tag.object.id })
 tag.to_content_tag(tag_options.delete(:tag), tag_options) +
 in_place_editor(tag_options[:id], in_place_editor_options)
end

当然了，这个代码目前我还看不懂。。。等以后能看懂了再来研究，反正，现在先把它当作是一个具有ajax功能的textbox吧。

为了响应in_form_editor_field的ajax事件，需要在Controller中加入一段代码来自动生成响应时间的action，这段代码如下：

ruby 代码

Contact.content_columns.each do |column|
in_place_edit_for :contact, column.name
end

你可以自由的选择把它放到controller的什么位置（只要不放到其他action内部），这段代码使用in_place_edit_for来自动生成了一系列的action，这个魔术是怎么变的呢？马上解开谜底：

ruby 代码

def in_place_edit_for(object, attribute, options = {})
   define_method("set_#{object}_#{attribute}") do
     @item = object.to_s.camelize.constantize.find(params[:id])
     @item.update_attribute(attribute, params[:value])
     render :text => @item.send(attribute)
   end
 end

通过代码，可以一目了然了。

到此为止，我们做完了所有的基础工作，让我们总结一下，为了使用ajax来查看修改字段内容，我们需要经过如下几个步骤：
1.在视图中引入<%= javascript_include_tag :default%>
2.在需要的地方使用in_place_editor_field :class_name,:class_method
3.在controller中使用in_palce_editor_for来自动生成一系列方法
只要三步，ajax就是这么简单。

评论

2 楼 9esuLuciano 2008-04-08  

既然用ror最好还是遵循它的原则,否则会给自己添麻烦,如果实在不行,可以覆盖in_place_editor的代码.

1 楼 whku 2008-03-28  

如果說小弟的資料庫沒有id這項 只有NO欄位 如何達成in place edit