Как мне создать динамическую боковую панель вместо страницы индекса с помощью Rails 5? - PullRequest
Новая
       2

Как мне создать динамическую боковую панель вместо страницы индекса с помощью Rails 5?

0 голосов
/ 02 ноября 2018

Я новичок в Rails 5 и работаю над приложением NoteTaking.

Учитывая, как структурированы приложения для заметок, я хотел бы иметь динамическую боковую панель со всеми созданными постами, появляющимися на боковой панели (и возможную возможность прокрутки внутри боковой панели) вместо наличия индексной страницы.

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

enter image description here

Вот соответствующий код: 

application.html.erb

<body>
<div id="sidebar">
  <div id="logo">
    <%= link_to root_path do %>
      <%= image_tag "logo.svg" %>
    <% end %>
  </div>

  <ul>
    <li class="category">Notes</li>
    <% @posts.all.each do |post| %>
      <li><%= post.title %></li>
    <% end %>
  </ul>

  <ul>
    <li class="category">Social</li>
    <li><%= link_to "Twitter", "#" %></li>
    <li><%= link_to "Facebook", "#" %></li>
    <li><%= link_to "Email", "#" %></li>
  </ul>
  <p class="sign_in">Admin Login</p>
</div>

<div id="main_content">
  <div id="header">
    <p>All Posts</p>
    <div class="buttons">
      <button class="button"><%= link_to "New Post", new_post_path %></button>
      <button class="button">Log Out</button>
    </div>
  </div>
  <% flash.each do |name, msg| %>
    <%= content_tag(:div, msg, class: "alert") %>
  <% end %>
  <%= yield %>
</div>

Произошла постоянная ошибка, которая говорила: неопределенный метод 'all' для nil: NilClass в application.html.erb. Более конкретно здесь: 

 <ul>
   <li class="category">Notes</li>
   <% @posts.all.each do |post| %>
     <li><%= post.title %></li>
   <% end %>
 </ul>

Вот что я попробовал (понятия не имею, можно ли это сделать ...), я добавил @posts, который будет доступен во всех видах, добавив его к application_controller.rb. 

class ApplicationController < ActionController::Base
  def index
    @posts = Post.all.order("created_at DESC")
  end  
end

Я также включил @posts в методы new и create в posts_controller.rb следующим образом: 

def new
    @posts = Post.all.order("created_at DESC")
    @post = Post.new
  end

  # GET /posts/1/edit
  def edit
  end

  # POST /posts
  # POST /posts.json
  def create
    @posts = Post.all.order("created_at DESC")
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: 'Post was successfully created.' }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

Я не знаю, как действовать сейчас. Не могли бы вы мне помочь?! Никакая мужская земля для меня ... Спасибо!

Стек ошибок из консоли сервера: 

Started POST "/posts" for 127.0.0.1 at 2018-11-02 16:45:34 -0400
   (2.6ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
  ↳ /Users/nikhilsamuel/.rvm/gems/ruby-2.5.1/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
Processing by PostsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"6zdP1vkLjn0BKq4/3qFqozrUhHepyW68Kc+dcJyc4wZMgCdBHBcRawLyXA+8pVnkJelurDFF72O5eruqxujQGw==", "post"=>{"title"=>"hello there", "body"=>"app"}, "commit"=>"Create Post"}
   (0.1ms)  begin transaction
  ↳ app/controllers/posts_controller.rb:31
  Post Create (2.7ms)  INSERT INTO "posts" ("title", "body", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["title", "hello there"], ["body", "app"], ["created_at", "2018-11-02 20:45:35.246718"], ["updated_at", "2018-11-02 20:45:35.246718"]]
  ↳ app/controllers/posts_controller.rb:31
   (3.4ms)  commit transaction
  ↳ app/controllers/posts_controller.rb:31
Redirected to http://localhost:3000/posts/12
Completed 302 Found in 30ms (ActiveRecord: 7.3ms)


Started GET "/posts/12" for 127.0.0.1 at 2018-11-02 16:45:35 -0400
Processing by PostsController#show as HTML
  Parameters: {"id"=>"12"}
  Post Load (0.3ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ?  [["id", 12], ["LIMIT", 1]]
  ↳ app/controllers/posts_controller.rb:68
  Rendering posts/show.html.erb within layouts/application
  Rendered posts/show.html.erb within layouts/application (4.2ms)
Completed 500 Internal Server Error in 633ms (ActiveRecord: 0.3ms)



ActionView::Template::Error (undefined method `each' for nil:NilClass):
    19:
    20:       <ul>
    21:         <li class="category">Notes</li>
    22:         <% @posts.each do |post| %>
    23:           <li><%= post.title %></li>
    24:         <% end %>
    25:       </ul>

app/views/layouts/application.html.erb:22:in `_app_views_layouts_application_html_erb__3194645343067756970_70256024775560'
Started GET "/posts/new" for 127.0.0.1 at 2018-11-02 16:45:40 -0400
Processing by PostsController#new as HTML
  Rendering posts/new.html.erb within layouts/application
  Rendered posts/_form.html.erb (30.6ms)
  Rendered posts/new.html.erb within layouts/application (37.1ms)
  Post Load (0.4ms)  SELECT "posts".* FROM "posts" ORDER BY created_at DESC
  ↳ app/views/layouts/application.html.erb:22
Completed 200 OK in 84ms (Views: 73.9ms | ActiveRecord: 0.4ms)


Started GET "/posts/new" for 127.0.0.1 at 2018-11-02 16:45:41 -0400
Processing by PostsController#new as HTML
  Rendering posts/new.html.erb within layouts/application
  Rendered posts/_form.html.erb (1.9ms)
  Rendered posts/new.html.erb within layouts/application (5.0ms)
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" ORDER BY created_at DESC
  ↳ app/views/layouts/application.html.erb:22
Completed 200 OK in 45ms (Views: 39.1ms | ActiveRecord: 0.2ms)

Ответы [ 2 ]

0 голосов
/ 03 ноября 2018

Я запустил его с тем же кодом, что и вы, и придумал несколько вещей;

Во-первых, ваш application.html.erb не имеет закрывающего тега body, не уверен, что это просто неправильный тип.

Ваш html нуждается в изменении, так как мой выдал ошибку, когда фактически не создано ни одного поста, поэтому я обернул цикл в оператором; 

   <ul>
    <li class="category">Notes</li>
    <% unless @posts.nil? %>
      <% @posts.all.each do |post| %>
        <li><%= post.title %></li>
      <% end %>
    <% end %>
  </ul>

Что касается application_controller.rb, добавление там метода индекса не влияет на представление индекса ваших моделей. Избавьтесь от этого и оставьте application_controller пустым, каким он был. Самый простой способ выполнить то, что вы хотите, это просто запросить базу данных в application.html.erb, т.е. Поэтому действительно удалите все дополнительные переменные @posts, которые вы записали в контроллеры. 

<ul>
    <li class="category">Notes</li>
    <% Post.all.reverse.each do |post| %>
        <li><%= post.title %></li>
    <% end %>
</ul>

Это просто делает запрос с каждой загруженной страницы вместо использования переменной из контроллера. Нет пар, нет звонков.

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

Ура и удачи!

EDIT:

Увидел другой ответ после публикации, чтобы объединить два, которые вы могли бы изменить HTML; 

<ul>
<li class="category">Notes</li>
  <% posts_for_sidebar.each do |post| %>
    <li><%= post.title %></li>
  <% end %>

и затем добавьте следующий метод в application_helper.rb, как предложено; 

def posts_for_sidebar
@sidebar_posts = Post.all.reverse

конец

Но вам все равно нужно удалить все дополнительные переменные экземпляра @post в контроллерах.

0 голосов
/ 03 ноября 2018

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

Вместо этого добавьте вспомогательный метод, например, posts_for_navigation, в ваш ApplicationHelper и получите сообщения оттуда. Это будет означать гораздо меньше кода в контроллерах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...