每天一剂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)
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

这样我们就可以用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的效果吧！

评论

3 楼 axgle 2008-06-04  

FireFox下没问题。
IE下不工作～有问题

2 楼 smokingcat 2008-04-30  

我在IE下和FireFox下都可以工作，查查你的环境吧。

1 楼 s6520643 2008-04-29  

按照你说的写完后,在FF下可以看见selece里的内容,但在IE下不工作..是为什么呢?