Question

我试图显示我的应用程序中讨论的所有主题，因此我创建了一个下拉菜单（顺便说一句，如果有更好的方法，请随时分享它）：

<div class="form-group">
        <label for="topic_category">Category</label>
          <select id="topic_category" name="topic[category]" class="form-control">

            <option>Art</option>
            <option>Business</option>
            <option>Books</option>
            <option>Charity</option>
            <option>Coding</option>
            <option>Cooking</option>
            <option>Dance</option>
            <option>Design</option>
            <option>DIY</option>
            <option>Engineering</option>
            <option>Fashion</option> etc...


          </select>
      </div>

我尝试做的是创建指向每个类别的链接，并通过类似

的内容显示有多少主题是活跃的

-----编辑1 -----

我想要达到的目标是：

<div class="row">
  <div class="col-md-6" style ="padding-top: 10px; border-right: 1px solid #ccc;">
    <h4 style="text-align: center;">Topics</h4>
      <link_to project.category(Art)> (project.category(art).count)
  </div>

我知道这是错的，但是我最接近解释我想要实现的目标

----编辑2 -----

所以我仍然想要把它弄好，这可能是因为我是新手。所以按照你的答案我实现了类似的代码。

static_pages控制器。

 def home
    if logged_in?
      @user = current_user
      @topics_count = Topic.group(:category).count
      end
    end

    def categoryselection
      category = params[:category]
      topics = Topic.where(category: category)

      render json: { success: true, Topics: topics }
    end


def help
end

def about
end

def contact
end

end

主页视图

   .......
    <% if logged_in? %>

  <div class="row">
        <%= render 'shared/sidebar_right' %>
      <div class="col-md-8" style = "align-content: right">
        <%= render 'shared/feed' %>
      </div>

  </div>

<% else %>
 .....

Sidebar_right视图

            ......
            <div id='topics'>
            <% @topics_count.each do |topic, count| %>
            <a class ='project-link' href='topic_path?category=<%= topic %>'> <%= topic %> (<%= count %>)</a>
            <% end %>
            ......

<script type>

$('#topics').on('change', '.topic-link' function (e) {
  e.preventDefault();
  var category = $(e.currentTarget).val();
  var queryUrl = $(e).href + '?category=' + category;
  $.get(queryUrl, function(resp) {
    if (resp.success) {redirect_to topic_path 
      // select the div or whatever node on the DOM you are displaying the result, and change it.
    }
  });
});
</script>

主题控制器

class TopicsController < ApplicationController

.....

def index
end

def show
  @user = current_user
    @topic = Topic.find(params[:id])

end

.....

我得到的错误是没有路线匹配[GET] topic_path，我已经检查了我的路线并且确实退出了它实际上是指＆＃34;显示＆＃34;，这是否正在发生因为我使用的页面是主页而不是主题页面？

谢谢！

Answer 1

基于您的新修改

在控制器中：

def index
  @topics_count = Topic.group(:category).count
  # this will give you something like this { 'Art' => 10, 'Business' => 15' }
end

在html页面上：

<div id='topics'>
  <% @topics_count.each do |topic, count| %>
    <a class='topic-link' href='topic_show_url?category=<%= topic %>'> <%= topic %> (<%= count %>)</a>
  <% end %>
</div>

您不需要（也不应该）加载所有主题，因为您只是显示计数，而且大规模加载整个表格可能会导致您的网站崩溃。

这将处理您的第二个请求，显示用户在单击链接时选择的主题。

在页面上，当用户选择其中一个选项时发送ajax请求。

$('#topics').on('click', '.topic-link', function (e) {
  e.preventDefault();
  var category = $(e.currentTarget).val();
  var queryUrl = $(e).href + '?category=' + category;
  $.get(queryUrl, function(resp) {
    if (resp.success) {
      // select the div or whatever node on the DOM you are displaying the result, and change it.
    }
  });
});

控制器中的

def you_define_this_method
  category = params[:category]
  topics = Topic.where(category: category)

  render json: { success: true, topics: topics }
end

Answer 2

您可以在<option>标记内添加一个链接...即

    <option><a href="www.something.com">Art</a></option>

如何显示和链接对象的某个属性

2 个答案:

这将处理您的第二个请求，显示用户在单击链接时选择的主题。