每天一剂Rails良药之Making Your Own JavaScript Helper

上次我们在[url=http://hideto.iteye.com/blog/71956] 每天一剂Rails良药之In-Place Form Editing[/url]里讲到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文件:
[code]
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);
}
});
[/code]
可以看到，我们继承了InPlaceEditor，并覆盖了它的createEditField()方法并生成一个selectField。

2，在我们的页面中include我们的JavaScript
我们通过在app/views/layouts/contacts.rhtml中引入我们刚才的JavaScript文件来让它全局生效:
[code]
<%= javascript_include_tag "in_place_select_editor" %>
[/code]

3，写个demo页测试一下我们的JavaScript
创建一个app/views/contacts/demo.rhtml:
[code]
<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>
[/code]
现在让我们访问一下[url]http://localhost:3000/contacts/demo[/url]看看，是不是有In Place Select效果了？
别急，我们再写一个helper来让我们在view里用的更爽，而不用每次手动调用Ajax.InPlaceSelectEditor()。

4，写一个helper来包装我们的JavaScript
在app/helpers/application_helper.rb文件里添加以下两个方法:
[code]
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)
end

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
[/code]
这样我们就可以用helper方法来在view里生成JavaScript方法了

5，测试一下我们的In Place Select Editor吧
编辑app/views/contacts/show.rhtml:
[code]
<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' %>
[/code]
这里我们的:select_options => country_options_for_select用到了Rails内建的country_options_for_select()这个helper方法。
好了，New一个Contact，并点击进入Show页面，看看我们的In Place Select Editor的效果吧！