过滤类别答案

【问题标题】：Filtering categories过滤类别
【发布时间】：2017-01-16 19:18:18
【问题描述】：

在我的应用程序中，我有一个提供商列表，每个提供商都有类别。我的模型如下所示：

class Categorization < ApplicationRecord
  belongs_to :category
  belongs_to :provider
end

class Category < ApplicationRecord
  has_many :categorizations
  has_many :providers, through: :categorizations
  accepts_nested_attributes_for :categorizations
end

class Provider < ApplicationRecord
  has_many :categorizations
  has_many :categories, through: :categorizations
  accepts_nested_attributes_for :categorizations
end

在一个视图中，我有 2 个ul 列表。第一个是提供者列表，第二个是类别列表。它看起来像：

<ul class="nav nav-justified nav-carousel upper-thumbs">
    <% Provider.order(created_at: :asc).take(6).each_with_index do |provider, index| %>
      <li id="<%= provider.name %>_<%= index + 1 %>" class="btn-up"><a data-href="#"><%= provider.name %></a></li>
    <% end %>
</ul>

<ul id="parent" class="nav nav-justified nav-carousel left-thumbs">
    <% Category.order(created_at: :asc).take(7).each_with_index do |category, index| %>
      <li id="aside_<%= index + 1 %>" class="btn-aside"><i class="category_image" style="background: url(<%= category.cat_image %>) no-repeat;"></i><a data-href="#"><%= category.name %></a></li>
    <% end %>
</ul>

当我没有实现 rails 时，当我单击提供程序（它也被硬编码为类别）时，我可以看到，类别已被过滤。是js制作的：

var $btns = $('.btn-up').click(function () {
      if(this.id == 'a') {
          $('#parent > li#aside_1').fadeIn(450);
          $('#parent > li').not($('#parent > li#aside_1')).hide();
      } else {
          var $el = $('.' + this.id).fadeIn(450);
          $('#parent > li').not($el).hide();
      }
      $btns.removeClass('active');
      $(this).addClass('active');
  })

所以，问题是如何使过滤器工作，所以当我点击一个提供者时，它只会显示属于该提供者的类别？谢谢。

【问题讨论】：

标签： jquery ruby-on-rails filtering

【解决方案1】：

Ajax 是做这类事情的最佳方式。

例如

var $btns = $('.btn-aside').click(function () {
var provider_id = 'get selected provider via JS'   
$.ajax({
  type: "POST",
  url: "/some_url_of_controller_method",
  data: {
    provider: provider_id
  },
  success: function(data) {
    $('.btn-up').empty()
    $.each(data, function(){
    $('.btn-up').append('<option value="'+ this.value +'">'+ this.name  +'</option>')
)
  },
  error: function(data) {
    return false;
  }
    });
})

SomeContoller.rb

def some_method
 @provider = Provider.find_by_id(params[:provider])
 @categories = @provider.categories
 respond_to do |format|
  format.json { render json: @categories}
 end
end

【讨论】：

我在视图中添加了一个链接：<%= link_to provider.name, fetch_providers_path(provider: provider.id), remote: true %>，这样现在我可以将 propper 参数传递给控制器，并在 done() 来自 json 的 propper 值上传递 ajax 调用，但似乎什么都没有改变，类别仍然相同，它们没有empty()
通过创建一个文件some_method.js.erb 使其成为一种更可靠的方式，在该文件中我完成了我需要的所有操作。谢谢你的回答，它把我推向了正确的方向。

【解决方案2】：

因此，您可以采取一种方法来实现这一目标。

您可以在每次单击 Provider 时发送 AJAX 请求以获取其关联的类别并使用 JQuery 将其附加到您的 HTML。

这里粘贴的代码非常复杂，因此我建议您观看此视频以了解其工作原理并以适合您的方式实施。

Ryan Bates 在下面的视频中很好地解释了这个概念。

https://www.youtube.com/watch?v=FBxVN7U1Qsk

【讨论】：