Railsでネストされたコメントを適切にレンダリングする方法は?

トニーM

Rails 5アプリでネストされたコメントを正しく機能させようとしていますが、多くの問題が発生しています。

質問と回答のサイトを構築しています。回答に属するコメントがあり、他のコメントに属するコメントがあるコメントモデルがあります。

class Acomment < ApplicationRecord
  belongs_to :answer
  belongs_to :user
  belongs_to :parent, class_name: "Acomment", optional: true
  has_many :replies,
           class_name: "Acomment", foreign_key: :parent_id, dependent: :destroy
end

すべてのコメントを表示してから、コメントへのすべての返信、返信への返信などを表示したいのですが、ネストを正しく機能させる方法がわかりません。

私の見解では、各ループ内で、_comment.html.erb部分をレンダリングしています

<% answer.acomments.each do |comment| %>
  <%= render :partial=>"comment", :object=>comment %>
<% end %>

次に、_comment.html.erbパーシャルの中に、コメントと返信リンクを表示し、コメントへの返信用にパーシャルをレンダリングします。

<div>
  <%= comment.body %>
  <%= link_to "Reply", new_acomment_path(:parent_id => comment, :answer_id => comment.answer) if comment.parent_id.blank? %>

  <%= render partial: "reply", collection: comment.replies %>
</div>

これが_reply.html.erb部分的です:

<%= reply.body %>
<%= link_to "Reply", new_acomment_path(:parent_id => reply, :answer_id => reply.answer) %>

私は2つの問題に直面しています:

1)最初のパーシャルをレンダリングすると、コメントがレンダリングされるだけでなく、同時に返信もレンダリングされます(コメントでもあるため)。

2)2番目のパーシャル(返信)をレンダリングすると、本来あるべきコメント内にネストされません。すべてが故障しています。

編集:私はこれを見ることを期待しています:

Comment 1 
  Comment on Comment 1 
    Comment on Comment on Comment 1 
Comment 2 

しかし、代わりにこれは私が見ているものです:

Comment 1 
Comment on Comment 1 
Comment 2 
Comment on Comment 1 
Comment on Comment on Comment 1 
Comment on Comment on Comment 1

どんな助けでも大歓迎です。

タリンイースト

質問の最初の部分では、「親コメント」(つまり、返信ではないコメント)と「子コメント」(返信)を区別するのに役立つスコープがおそらく必要になります。

何かのようなもの:

class Acomment < ApplicationRecord
  belongs_to :answer
  belongs_to :user
  belongs_to :parent, class_name: "Acomment", optional: true
  has_many :replies, class_name: "Acomment", foreign_key: :parent_id, dependent: :destroy

  scope :is_parent, where(parent_id: nil)
  scope :is_child, where("parent_id IS NOT NULL")
end

以下の例を使用して、メインループ内の親のみをレンダリングできます...各親が独自の子をレンダリングすることを意図しています。

<% answer.acomments.is_parent.each do |comment| %>
    <%= render :partial=>"comment", :object=>comment %>
<% end %>

2番目の質問をWRT-もう少し情報が必要です-上記のコメントで質問します。

後:

だから...何が起こっているのか私の推測は:あなたは(あなたが言ったように)すべてのコメントを受け取っているだけで、それらは(親だけが外側のループに表示されるのではなく)外側のループに表示されていますそしてそれらはコメントのデータベース順であるため、この順序で再実行します。

パーシャルのデフォルトの命名規則により、実際には内部ループに何も表示されていません。

collectionパーシャルで使用する場合-Railsは各アイテムをパーシャルにフィードします...次に、パーシャルの名前にちなんでローカル変数に名前を付けます。この場合、「reply」という名前のパーシャルをレンダリングしようとしていますが、コメントのセットを渡しています...したがって、パーシャルは「reply」という変数を探します。

すでに使用しているのと同じ「コメント」パーシャルを再利用し、代わりに次のようにレンダリングすることをお勧めします。

<div>
  <%= comment.body %>
  <%= link_to "Reply", new_acomment_path(:parent_id => comment, :answer_id => comment.answer) if comment.parent_id.blank? %>

  <%= render partial: "comment", collection: comment.replies %>
</div>

これは再帰的であり(Pabloの提案と同じように)、サブコメントのセットごとにインデントすることでコメントスレッドをレンダリングします。

pabloとの会話を見るparentsと、スコープの名前が間違っている可能性があります...クラス階層をトラバースするのと同じ名前のrubyメソッドに干渉しているようです...おそらくそれは悪い名前-そのため、スコープの名前を変更します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

機能コンポーネントでネストされた要素をレンダリングする方法は?

分類Dev

親コンポーネントでレンダリングされたすべての子コンポーネントをリッスンする方法は?

分類Dev

ネストされた配列をレンダリングする方法は?

分類Dev

ネストされた要素をreactでレンダリングする方法

分類Dev

ネストされた配列をreactでレンダリングする方法

分類Dev

レンダリングされたコンポーネントをメモリに保存するにはどうすればよいですか?

分類Dev

ネストされたコンポーネントをレンダリングしないで反応する

分類Dev

Vue.js-この簡単な例でネストされたコンポーネントをレンダリングする方法は?

分類Dev

Reactでコンポーネントがレンダリングされた回数をテストするにはどうすればよいですか?

分類Dev

オフラインでレンダリングされたコンポーネントにパラメータを渡す方法は?

分類Dev

条件付きでレンダリングされたコンポーネントをアニメーション化する方法は?

分類Dev

.netコアで指定されたコンテキストをレンダリングする方法は?

分類Dev

Reactで重いWebソケットストリームを適切にレンダリングする方法は?

分類Dev

Reactでネストされた/スレッド化されたコメントをレンダリングする

分類Dev

親の状態の変更で機能コンポーネントを適切に再レンダリングする方法は?

分類Dev

反応コンポーネントがレンダリングまたは再レンダリングされるタイミングを確認する方法

分類Dev

ネストされたjsonをrailsでレンダリングするための好ましい方法は何ですか?

分類Dev

ネストされたJSONをreactでレンダリングする最良の方法は?

分類Dev

コンポーネントタグヘルパーでレンダリングされたコンポーネントの値にバインドする方法

分類Dev

Reactjs - レンダリングされたコンポーネントに onClick を適用できません

分類Dev

動的に作成された配列コンポーネントをAngular2のテンプレートhtmlにレンダリングする方法は?

分類Dev

入力されたコンポーネントをジェネリックコンポーネント内にレンダリングする簡単な方法

分類Dev

マップインリアクションを使用してレンダリングされたコンポーネントのリストの特定のコンポーネントを変更するにはどうすればよいですか?

分類Dev

パスが変更された場合にコンポーネントを再レンダリングする方法は?

分類Dev

ネストされたコンポーネントが適切に再レンダリングされない:VueJs

分類Dev

Angular 8で動的にレンダリングされたコンポーネントの出力をキャッチする方法は?

分類Dev

Railsでネストされたコメントを削除する方法

分類Dev

別のReactコンポーネントでレンダリングされた要素にアクセスするにはどうすればよいですか?

分類Dev

ルートに応じて条件付きコンポーネントのレンダリングを処理する適切な方法は?

Related 関連記事

  1. 1

    機能コンポーネントでネストされた要素をレンダリングする方法は?

  2. 2

    親コンポーネントでレンダリングされたすべての子コンポーネントをリッスンする方法は?

  3. 3

    ネストされた配列をレンダリングする方法は?

  4. 4

    ネストされた要素をreactでレンダリングする方法

  5. 5

    ネストされた配列をreactでレンダリングする方法

  6. 6

    レンダリングされたコンポーネントをメモリに保存するにはどうすればよいですか?

  7. 7

    ネストされたコンポーネントをレンダリングしないで反応する

  8. 8

    Vue.js-この簡単な例でネストされたコンポーネントをレンダリングする方法は?

  9. 9

    Reactでコンポーネントがレンダリングされた回数をテストするにはどうすればよいですか?

  10. 10

    オフラインでレンダリングされたコンポーネントにパラメータを渡す方法は?

  11. 11

    条件付きでレンダリングされたコンポーネントをアニメーション化する方法は?

  12. 12

    .netコアで指定されたコンテキストをレンダリングする方法は?

  13. 13

    Reactで重いWebソケットストリームを適切にレンダリングする方法は?

  14. 14

    Reactでネストされた/スレッド化されたコメントをレンダリングする

  15. 15

    親の状態の変更で機能コンポーネントを適切に再レンダリングする方法は?

  16. 16

    反応コンポーネントがレンダリングまたは再レンダリングされるタイミングを確認する方法

  17. 17

    ネストされたjsonをrailsでレンダリングするための好ましい方法は何ですか?

  18. 18

    ネストされたJSONをreactでレンダリングする最良の方法は?

  19. 19

    コンポーネントタグヘルパーでレンダリングされたコンポーネントの値にバインドする方法

  20. 20

    Reactjs - レンダリングされたコンポーネントに onClick を適用できません

  21. 21

    動的に作成された配列コンポーネントをAngular2のテンプレートhtmlにレンダリングする方法は?

  22. 22

    入力されたコンポーネントをジェネリックコンポーネント内にレンダリングする簡単な方法

  23. 23

    マップインリアクションを使用してレンダリングされたコンポーネントのリストの特定のコンポーネントを変更するにはどうすればよいですか?

  24. 24

    パスが変更された場合にコンポーネントを再レンダリングする方法は?

  25. 25

    ネストされたコンポーネントが適切に再レンダリングされない:VueJs

  26. 26

    Angular 8で動的にレンダリングされたコンポーネントの出力をキャッチする方法は?

  27. 27

    Railsでネストされたコメントを削除する方法

  28. 28

    別のReactコンポーネントでレンダリングされた要素にアクセスするにはどうすればよいですか?

  29. 29

    ルートに応じて条件付きコンポーネントのレンダリングを処理する適切な方法は?

ホットタグ

アーカイブ