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

Question

我想在Rails 4中创建一个应用程序.

我正在使用简单的表单形式,并且刚刚尝试使用gem'inpendent-fields-rails'来隐藏或显示基于主要问题的表单字段的子集问题.

我卡住了.

我已将gems添加到我的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？我把它们放在我的宝石文件中.这还不够,还是需要其他东西来完成这项工作？

目前,当我尝试这种形式时,没有任何东西被隐藏.我已经尝试将真值交换为'是',但这也没有任何区别.

<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

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

Rails 自动执行此操作。它在安装时将 jQuery 添加到 application.js 文件中，因此如果您没有删除该行，我们可以跳到步骤 2：

您需要将该application.js脚本包含到您的页面中。您可以在正在处理的视图中执行此操作，但如果您将在应用程序的其他位置使用 javascript，我建议将 javascript 添加到应用程序的布局中，以便它将应用于使用该布局的所有页面。

默认情况下，该文件位于 下app/views/layouts/application.html.erb。

必须将这行代码（或类似的代码）添加到您的文件中，以便使用您的视图加载脚本：

<%= javascript_include_tag "application" %>

它将允许您访问所有 javascript 代码。

编辑：

除此之外，我注意到您缺少显示字段的条款。在依赖字段的文档中，声明您必须指定您依赖的字段以及元素类的值，如下所示：

<div class="js-dependent-fields[data-select-id='filing_<INPUT_ID>' data-option-value='<VALUE>']"> 
   ... fields ...
</div>

您应该替换<INPUT_ID>为这些字段所依赖的输入的 id 以及必须具有<VALUE>的相应值<INPUT_ID>。