每天一剂Rails良药之Making Your Own JavaScript Helper
上次我们在每天一剂Rails良药之In-Place Form Editing里讲到In-Place编辑，大家意犹未尽吧！但是现在只能支持text和textarea的In-Place Edit，如何添加一个对select的In-Place Edit呢？
或者说，我们怎样写自己的JavaScript Helper插件呢？
今天我们就在上篇文章的基础上写一个对Rails自带In-Place Editor的扩展，让它支持对select的In-Place Edit，并且了解一下如何写我们自己的JavaScript Helper。
1，了解Rails自带的InPlaceEditor并写我们自己的InPlaceSelectEditor
Rails自带的InPlaceEditor在文件public/javascripts/controls.js里定义，它绑定click事件到enterEditMode()方法，该方法调用createForm()和createEditField()，这两个方法主要就是生成form和text/textarea，现在我们的思路就是继承InPlaceEditor并重写createEditField()方法，让它生成select。
创建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; if(this.options.loadTextURL) { text = this.options.loadingText; } else { text = this.getText(); } 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); } });
可以看到，我们继承了InPlaceEditor，并覆盖了它的createEditField()方法并生成一个selectField。
2，在我们的页面中include我们的JavaScript
我们通过在app/views/layouts/contacts.rhtml中引入我们刚才的JavaScript文件来让它全局生效:
<%= javascript_include_tag "in_place_select_editor" %>
3，写个demo页测试一下我们的JavaScript
创建一个app/views/contacts/demo.rhtml:
<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>Blash</option>' + '<option>Some Value</option>' + '<option>Some Other Value</option>'});</script>
现在让我们访问一下http://localhost:3000/contacts/demo看看，是不是有In Place Select效果了？
别急，我们再写一个helper来让我们在view里用的更爽，而不用每次手动调用Ajax.InPlaceSelectEditor()。
4，写一个helper来包装我们的JavaScript
在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_pace_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)enddef 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
这样我们就可以用helper方法来在view里生成JavaScript方法了
5，测试一下我们的In Place Select Editor吧
编辑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' %>
这里我们的:select_options => country_options_for_select用到了Rails内建的country_options_for_select()这个helper方法。
好了，New一个Contact，并点击进入Show页面，看看我们的In Place Select Editor的效果吧！
页:
[1]