写自己的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' %>