Rendern von Daten mit dynamischen IDs mit jQuery-Effekten in Rails verwendet werden

Question

Ich baue eine Rails-App, und es gibt eine Komplexitätsebene, wie Daten in der Rails-Tabelle verwendet werden können, um bestimmte Aktionen von JS/jQuery zu steuern, die ich nicht begreife .

Was ich versuche zu tun: Ich habe eine Tabelle namens Comments. Angenommen, es besteht aus Werten für post (die Zeichenfolge des Kommentars), slug (die eine bestimmte Blogseite angibt, auf der es angezeigt werden sollte) und location (ein Zeichenfolgenwert, der mit der ID eines Div auf der Seite übereinstimmt). Wichtig: Dieses div ist dynamisch - auf jeder Seite wird eine andere Anzahl von divs angezeigt, die mit "toc_0", "toc_1" usw. beschriftet sind.

Am Ende würde Ich mag .append() oder ein ähnlicher Effekt jQuery verwenden (dh prepend(), after() mit einer ID an den div neben einen bestimmten Kommentar zu veröffentlichen, die location auf einer Seite übereinstimmt, die slug übereinstimmt.

Was ich jetzt tun. es werden Kommentare, die der Butzen Wert entsprechen der einfache Teil ist, offensichtlich ich, dass wie so in mein Controller tue:

class BlogsController < ActionController::Base 

     @posts = Post.where(slug: params[:id]).all 
     @comments = Comment.where(slug: params[:id]).all 

end 

in der Ansicht, ich binRenderingmit einer normalen Schleife - Putting es in einer Spalte neben dem Post.

<div class="col-sm-8"> 
     <% @posts.each do |post| %> 
       <h2 id="title"><%= post.title %></h2> 
       <p id="category"><%= post.category %></p> 
       <div id="paragraph"><%= markdown(post.content) %></div>  
     <% end %> 
    </div> 

    <div class="col-sm-4"> 
     <% @comments.each do |comment| %> 
      <div class="card-1"> 
      <h5 class="testcomment"><%= comment.post %></h5> <h5 class="testauthor"></h5> 
      </div> 
     <% end %> 

    </div><!--/column --> 

So Wo würde das Targeting passieren? Ich erkenne aus diesem Code, es ist wahrscheinlich verwirrend, wie wir einen Kommentar zu einem bestimmten div in der Post "Ziel". Das liegt daran, dass ich das Markdown-Juwel verwende und jeden Header als eigene ID im DOM kennzeichnet. Beispiel Live-Ausgabe für Klarheit:

<h3 id="toc_0">Example Heading 1</h3> 

    <p>Hello World, this is the first para</p> 

<h3 id="toc_1">Example Heading 2</h3> 

Wenn die Seite macht, möchte ich die Steuerung nicht nur Kommentare machen, dass die Seite des Slug entsprechen (wie jetzt): Ich will es den Kommentar neben dem div anhängen ID, die der Spalte location entspricht, auf die oben verwiesen wird.

Da diese IDs dynamisch sind, kann ich jQuery verwenden, um die ID zu "tarnen", ohne auf "toc_0", "toc_1" usw. zu verweisen, oder muss dies mit etwas Controller-Magie geschehen?

Answer 1

Etwas, das dies einfacher machen würde, ist, wenn Sie eine has_many: comments im Posts-Modell hinzugefügt haben. Dann könntest du für jeden Beitrag etwas tun, wo du schaust, um zu sehen, ob ein Kommentar oder eine Reihe von Kommentaren damit verbunden ist.

<% @posts.each do |post| %> 
<div class="row"> 
    <div class="col-sm-8"> 
    <h2 id="title"><%= post.title %></h2> 
    <p id="category"><%= post.category %></p> 
    <div id="paragraph"><%= markdown(post.content) %></div>  
    </div> 
    <div class="col-sm-4"> 
    <% if @post.comments.count > 0 %> 
     <% @post.comments.each do |comment| %> 
     <div class="card-1"> 
      <h5 class="testcomment"><%= comment.post %></h5> <h5 class="testauthor"></h5> 
     </div> 
     <% end %> <!-- end each --> 
    <% end %> <!-- end if --> 
    </div> 
<% end %> <!-- end each post -->