Making Your Own Javascript Helper [Rails Recipes]

写自己的magical one-liners for Javascript.
继续上一章的in_place_editor, 完成一个in_place_select_editor.

在rails里，InPlaceEditor是在 public/javascripts/control.js里面定义的，单击click会触发enterEditMode方法，然后由createForm()和createEditField()生成form.

目标：继承InPlaceEditor, 重写createEditField()完成select_editor.
创建一个新的js文件：public/javascripts/in_place_select_editor.js

	Ajax.InPlaceSelectEditor = Class.create();   
	Object.extend(Object.extend(Ajax.InPlaceSelectEditor.prototype,   
	                                          Ajax.InPlaceEditor.prototype), {   
	    createEditField: function() {   
	        var text = (this.options.LoadTextURL ? this.options.loadingText : this.getText()); // Updated
	         
	        this.options.textarea = false;   
	        var selectField = document.createElement("select");   
	        selectField.name = "value";   
	        selectField.innerHTML = this.options.selectOptionsHTML ||   
	                                    "<option>" + text + "</option>";   
	        $A(selectField.options).each(function(opt, index) {   
	            if(text == opt.value) {   
	                selectField.selectedIndex = index;   
	            }   
	        }   
	        );   
	            selectField.style.backgroundColor = this.options.highlightcolor;   
	            this.editField = selectField;   
	            if(this.options.loadTextURL) {   
	                this.loadExternalText();   
	            }   
	            this.form.appendChild(this.editField);   
	        }   
	 });  

把这个js文件加入到项目里

<%= javascript_include_tag "in_place_select_editor" %>

应用:

<span id="an_element_we_want_to_edit">Some Value</span>
<script type="text/javascript">
  new Ajax.InPlaceSelectEditor(
    'an_element_we_want_to_edit',
    '/an/update/url',
    { selectOptionsHTML: '<option>Blah</option>' +
                         '<option>Some Value</option>' +
                         '<option>Some Other Value</option>' });
</script>

刷新页面,就可以了(??? 不过选项是hardcoded ???)

下面来制作这个helper, 而不在view里面出现javascript
MakingYourOwnJavaScriptHelper /app/helpers/application_helper.rb

def in_place_select_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_select_editor(tag_options[:id], in_place_editor_options)
end

上面会产生如下的js的代码
MakingYourOwnJavaScriptHelper /app/helpers/application_helper.rb

def in_place_select_editor(field_id, options = {})
  function = "new Ajax.InPlaceSelectEditor("
  function << "' #{field_id}' , "
  function << "' #{url_for(options[:url])}' "
  function << (' , ' + options_for_javascript(
    {
      'selectOptionsHTML' =>
          %('#{escape_javascript(options[:select_options].gsub(/\n/, ""))}' )
    }
    )
  ) if options[:select_options]
  function << ' )'
  javascript_tag(function)
end

新的View是这个样子地。。。
MakingYourOwnJavaScriptHelper/app/views/contacts/show.rhtml

<p>
  <b>Name:</b>
    <%= in_place_editor_field :contact, :name %> <br />
  <b>Country:</b>
    <%= in_place_select_editor_field(
                 :contact,
                 :country,
                 {},
                 :select_options => country_options_for_select) %>
</p>
<br />

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