如何修复这个损坏的 JS ERB？答案

【问题标题】：How do I fix this broken JS ERB?如何修复这个损坏的 JS ERB？
【发布时间】：2020-01-19 01:26:59
【问题描述】：

我正在我的home#index 页面上呈现一组类别，如下所示：

views/home/index.html.erb

<div class="content">
  <div class="video-list">
    <%= render "home/categories" %>
  </div>
</div>

这就是我的home/_categories.html.erb 的样子：

<div class="list-section" id="categories">
  <% @filter.each do |category| %>
    <%= render partial: "categories/category", locals: { category: category } %>
  <% end %>
</div>

这是我的categories/_category.html.erb：

<h3 class="video-list-title"><%= category %></h3>
<div class="video-list-carousel-con scroll">
  <div class="items">
    <% Program.tagged_with(category).each do |program| %>
      <div class="video-list-thumbnail-con">
        <%= image_tag program.header_image_url %>
        <div class="thumbnail-overlay">
          <span>Plus Icon</span>
          <span>i Icon</span>
        </div>
        <p><strong><%= program.name %></strong></p>
        <p><%= program.airs_at.strftime("%b %d, %Y") %></p>
      </div>
    <% end %>
  </div>
</div>

这是我的HomeController#Index：

  def index
    @all_tags = ActsAsTaggableOn::Tag.all.map(&:name)
    if params["search"]
      @filter = params["search"]["categories"].flatten.reject(&:blank?)
      @programs = Program.all.global_search("#{@filter}")
      @recommendations = @filter.empty? ? Program.all : Program.all.tagged_with(@filter, any: true)
    else
      @filter = ActsAsTaggableOn::Tag.all.map(&:name)
      @recommendations = Program.all
    end

    respond_to do |format|
      format.html
      format.js
    end
  end

这是我在_navbar.html.erb partial 中的搜索表单：

 <%= simple_form_for :search, url: root_path, method: "GET" do |f| %>
     <%= f.input :categories, label: "Category", collection: @all_tags, as: :check_boxes %>
     <%= f.submit "Search", class: "btn btn-primary" %>
     <%= link_to "Reset", root_path %>
  <% end %>

<script type="text/javascript">
  var checkBoxes = document.querySelectorAll(".form-check-input");
  var form = document.querySelector('form');

  for (const check of checkBoxes) {
  check.addEventListener( 'change', function() {
    console.log('checked');
    Rails.fire(form, 'submit');
  });
  }
</script>

因此，以上所有内容都适用于正常的表单提交。

但是，我正在尝试ajaxify 整件事。我在表单中添加了remote: true，并创建了以下index.js.erb，但它不起作用：

function replacePrograms (innerHTML) {
  const categories = document.getElementById('categories');
  categories.innerHTML = innerHTML;
}

if ('<%= @filter %>' === "[]") {
  replacePrograms("<%= j render 'home/categories', categories: Program.all %>");
}
else {
  replacePrograms("<%= j render 'home/categories', categories: @filter %>");
}

我想要发生的是，当我单击任何复选框时，它会刷新我的 home/_categories.html.erb 上的整个类别集合。

我该如何做到这一点？

【问题讨论】：

第一条评论：你应该使用 "replaceWith()" 而不是 "innerHTML=" 因为刷新后 DOM 元素是重复的
我不明白categories: Program.all，因为它实际上不是“类别”bu“程序”
您在导航检查器中可以看到什么？响应的内容是什么？
@Jean-MichelGigault 是的，我必须清理一下......我实际上解决了这个问题。但我知道它还有其他问题需要解决。

标签： javascript ruby-on-rails ruby-on-rails-6

【解决方案1】：

原来问题是我实际上并没有在我的 JS 中正确选择表单和复选框。

所以我换了：

<script type="text/javascript">
  var checkBoxes = document.querySelectorAll(".form-check-input");
  var form = document.querySelector('form');

  for (const check of checkBoxes) {
  check.addEventListener( 'change', function() {
    console.log('checked');
    Rails.fire(form, 'submit');
  });
  }
</script>

与：

<script type="text/javascript">
  var checkBoxes = document.querySelectorAll("div.filters input.check_boxes");
  var form = document.querySelector('div.filters form.simple_form.search');

  for (const check of checkBoxes) {
  check.addEventListener( 'change', function() {
    Rails.fire(form, 'submit');
  });
  }
</script>

现在它可以工作了。

它现在还有其他问题，但我会解决这些问题。

【讨论】：