javascript - Rails 4 - 用于具有简单形式的依赖字段的 JS

Question

我正在尝试在 Rails 4 中制作一个应用程序。

我正在为表单使用简单的表单，并且刚刚尝试使用 gem 'dependent-fields-rails' 来根据主要问题的表单字段隐藏或显示子集问题。

我卡住了。

我已将 gem 添加到我的 gem 文件中用于:

gem 'dependent-fields-rails'
gem 'underscore-rails'

我已将我的 application.js 更新为:

//= require dependent-fields
//= require underscore

我有一个表格，其中有:

<%= f.simple_fields_for :project_date do |pdf| %>
  <%= pdf.error_notification %>

                <div class="form-inputs">


                    <%= pdf.input :student_project, as: :radio_buttons, :label => "Is this a project in which students may participate?", autofocus: true %>


                    <div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true">


                    <%= pdf.input :course_project, as: :radio_buttons, :label => "Is this a project students complete for credit towards course assessment?" %>

                    <%= pdf.input :recurring_project, as: :radio_buttons, :label => "Is this project offered on a recurring basis?" %>

                    <%= pdf.input :frequency,  :label => "How often is this project repeated?", :collection => ["No current plans to repeat this project", "Each semester", "Each year"] %>
                    </div>

                    <div class='row'>
                        <div class="col-md-4">
                            <%= pdf.input :start_date, :as => :date_picker, :label => "When do you want to get started?"  %>
                        </div>  
                        <div class="col-md-4">
                            <%= pdf.input :completion_date,  :as => :date_picker, :label => "When do you expect to finish?" %>
                        </div>
                        <div class="col-md-4">          
                            <%= pdf.input :eoi, :as => :date_picker, :label => 'When are expressions of interest due?' %>
                        </div>
                    </div>
                </div>  
        <% end %>

<script type="text/javascript">
  $('.datetimepicker').datetimepicker();
</script>

<script>
$(document).ready(function() {
    DependentFields.bind()
});
</script>

我对 javascript 了解不多。

我不确定最后的脚本段落是否必要，或者 gem 是否为您将其放入代码中。我不确定它是否应该在脚本标签内表达，我也不知道如何使此要求生效(在相关字段的 gem 页面上列出):

"Be sure to include underscorejs and jquery in your page."

如何在页面中包含 underscorejs 和 jQuery？我在我的 gem 文件中有它们。这是否足够或还需要其他什么来完成这项工作？

目前，当我尝试使用此表单时，没有隐藏任何内容。我已经尝试将真实值交换为"is"，但这也没有任何区别。

<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true">

<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="yes">

谁能看出我哪里出错了？

Answer 1

我认为您在定义单选按钮时正在跳过 collection 属性。

如果您查看 documentation example ，您会看到他们使用 collection 来定义单选按钮的值。然后他们使用定义的值之一来设置 data-radio-value 属性。

试试这个，让我知道:

<div class="form-inputs">

  <%= pdf.input :student_project, as: :radio_buttons, autofocus: true,
      :label => "Is this a project?", :collection => ['Yes', 'No'] %>

  <div class="js-dependent-fields" data-radio-value='Yes' 
       data-radio-name="project_date[student_project]">
    ...
  </div>

</div>

更新

如果你看this示例项目，application.js文件以与您不同的顺序包含所需的库。这可能是错误。

请注意，您以这种方式需要库:

//= require dependent-fields
//= require underscore

虽然示例项目以这种方式需要库:

//= require underscore
//= require dependent-fields

希望对您有所帮助!