Категории фильтров

Question

В моем приложении у меня есть список поставщиков, и у каждого провайдера есть категории. Мои модели выглядят следующим образом:

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> 

Когда у меня не было реализации рельсов, когда я нажал на провайдера (это было жёстко, а также, как категории), я мог видеть, категории фильтровали. Это было сделано с помощью 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'); 
    }) 

Итак, вопрос заключается в том, чтобы сделать работу фильтра, поэтому, когда я нажимаю на провайдере, он покажет мне только категорию, которая относится к этому провайдеру? Благодарю.

Answer 1

Ajax - лучший способ сделать это.

ex.

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 

Answer 2

Так вот один подход можно предпринять, чтобы достичь этого.

Вы можете отправлять запрос AJAX каждый раз, когда вы нажимаете на Провайдера для извлечения связанных с ним категорий и добавляете его в свой HTML с помощью JQuery.

Код довольно сложный, чтобы вставить здесь, поэтому я предлагаю вам просмотреть это видео, чтобы понять, как он работает и реализовать его таким образом, который работает на вас.

Райан Бейтс очень хорошо объясняет эту концепцию в приведенном ниже видео.

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