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 代码
 
  1. def in_place_editor_field(object, method, tag_options = {}, in_place_editor_options = {})  
  2.  tag = ::ActionView::Helpers::InstanceTag.new(object, method, self)  
  3.  tag_options = {:tag => "span":id => "#{object}_#{method}_#{tag.object.id}_in_place_editor":class => "in_place_editor_field"}.merge!(tag_options)  
  4.  in_place_editor_options[:url] = in_place_editor_options[:url] || url_for({ :action => "set_#{object}_#{method}":id => tag.object.id })  
  5.  tag.to_content_tag(tag_options.delete(:tag), tag_options) +  
  6.  in_place_editor(tag_options[:id], in_place_editor_options)  
  7. end  

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

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

ruby 代码
 
  1. Contact.content_columns.each do |column|  
  2. in_place_edit_for :contact, column.name  
  3. end  

你可以自由的选择把它放到controller的什么位置(只要不放到其他action内部),这段代码使用in_place_edit_for来自动生成了一系列的action,这个魔术是怎么变的呢?马上解开谜底:
ruby 代码
 
  1. def in_place_edit_for(object, attribute, options = {})  
  2.    define_method("set_#{object}_#{attribute}"do  
  3.      @item = object.to_s.camelize.constantize.find(params[:id])  
  4.      @item.update_attribute(attribute, params[:value])  
  5.      render :text => @item.send(attribute)  
  6.    end  
  7.  end  

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

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

你可能感兴趣的:(JavaScript,Ajax,prototype,Ruby,Rails)