如何使我的 Rails 3 表单中的 javascript 不显眼？答案

【问题标题】：How can I make the javascript in my Rails 3 form unobtrusive?如何使我的 Rails 3 表单中的 javascript 不显眼？
【发布时间】：2011-06-05 17:21:53
【问题描述】：

我是一个 Rails 新手，我正在尝试使用 Rails 3 制作一个用于管理标签集翻译的应用程序。据我所知，我还没有超越脚手架，因为我正在使用 Rails 3 的默认 JavaScript 库（即原型，而不是 jQuery）。

我有一个用于标签集名称的表单，所需的行为是将所有当前标签集的名称填充到下拉列表中 ("label_sets")，当您选择一个时，它填充 :name 文本字段 ($('label_set_name')) 并禁用它。如果下拉列表显示:include_blank 值，则可以输入新的标签集名称。提交表单后，:name 文本字段会重新启用，因此它的值实际上会被保存。

此表单确实执行了所需的行为，但我认为必须有一种方法可以将 :onsubmit 和 :onchange 中的 javascript 重构为另一个文件并使其不显眼。我已经在网上搜索了有关在 Rails 3 中制作不显眼的 javascript 的材料，但老实说，我对其中的很多内容感到困惑，并且不知道如何将其应用于我的案例。有人可以提供任何建议吗？我的标签集表单的缩写来源如下：

# app/views/label_sets/_form.html.erb
<%= form_for(@label_set, 
             :html => { :onsubmit => "$('label_set_name').enable();" }) do |f| %> 
  # ... 
  <div class="field">
    <%= label "label_sets", t('.label_set') %><br />
    <%= select_tag("label_sets",
                   options_for_select(LabelSet::NAMES), 
                   { :include_blank => t('.new'),
                     :onchange => "if (this.value.empty()) {
                                     $('label_set_name').clear(); 
                                     $('label_set_name').enable(); 
                                   } else { 
                                     $('label_set_name').value = this.value;
                                     $('label_set_name').disable(); 
                                   }" }) %><br />
  </div>
  <div class="field">    
    <%= f.label :name %><br />    
    <%= f.text_field :name %>
  </div>
  # ...
<% end %>

更新：所以我认为我解决了我的问题，或者至少让我的表单视图看起来更干净，方法是取出所有 javascript 并将其填充到 application.js（并用 jQuery 编写只是为了尝试新事物）。

新的表单视图如下所示：

# app/views/label_sets/_form.html.erb
<%= form_for(@label_set) do |f| %> 
  # ... 
  <div class="field">
    <%= label "label_sets", t('.label_set') %><br />
    <%= select_tag("label_sets",
                   options_for_select(LabelSet::NAMES), 
                   { :include_blank => t('.new') }) %><br />
  </div>
  <div class="field">    
    <%= f.label :name %><br />    
    <%= f.text_field :name %>
  </div>
  # ...
<% end %>

新的application.js 看起来像：

# public/javascripts/application.js
$(function() {
  $('.new_label_set, .edit_label_set').submit(function() {
    if ($('#label_set_name').attr('disabled') == true) {
      $('#label_set_name').removeAttr('disabled');
    }   
  });

  $('#label_sets').change(function() {
    if ($(this).val() == '') {
      $('#label_set_name').val('');
      $('#label_set_name').removeAttr('disabled');
    } else {
      $('#label_set_name').val($(this).val());
      $('#label_set_name').attr('disabled', true);
    }
  });
});

【问题讨论】：

标签： jquery internationalization ruby-on-rails-3 unobtrusive-javascript

【解决方案1】：

第二种方法优于旧的和以前的 rjs 样式代码。几乎第二种方法通过压缩 JavaScript 代码，将其转换为 tar.gz 以便更快地传输到客户端浏览器等，为最小化 JavaScript 代码开辟了更多机会。还请查看 How can I submit a value from another field on the page via link_to with Rails? 线程以获取有关同一问题的更多详细信息.

【讨论】：