0

シナリオ：投稿に多くのコメントが含まれています。投稿のインデックス ページで、ユーザーが表示リンク (link_to post) をクリックすると、そのコメントが投稿の下に表示されます。

ここでは、append() を使用してコメントを追加します。 $('#edit_post_<%= @post.id %>').append('<%= j render "comments/comments" %>')したがって、ユーザーが表示リンクをクリックすると、コメントが読み込まれて表示されます。

しかし、どうすればこれらのコメントを再び非表示にできますか (つまり、コメントを切り替え可能にする)?

投稿/インデックス

<h1>Posts</h1>
<% @posts.each do |post| %>
    <%= form_for post, remote: true do |f| %>
        <%=  post.content %>
        <div id="post_<%= post.id %>">
          <%= link_to "show", post, remote: true  %>
        </div>
    <% end %>
<% end %>

投稿/show.js.erb

$('#edit_post_<%= @post.id %>').append('<%= j render "comments/comments" %>')

コメント/_comments.html.erb

<% @comments.each do |comment| %>
    <%= comment.content %>
<% end %>
4

1 に答える 1

1

新しいコメントのイベント バインディングがないと思います。

次のようなものを使用する必要があります

$('.container-of-your-comments').on('click', '.the-toggle-button', function (e) {
  // toggle
});

そのため、トグルはすべての（将来の）要素でも機能します。

編集：

質問の変更を考えると、トグルがコメントリスト全体を非表示にすることを意味する場合は、手動で行う必要があります。

個別の表示/非表示ボタンを使用することをお勧めします (状態の変更時にボタンを表示および非表示にすることもできます)。そうしないと、より複雑になります。

たとえば、投稿/インデックスでは:

<h1>Posts</h1>
<% @posts.each do |post| %>
    <%= form_for post, remote: true do |f| %>
        <%=  post.content %>
        <div id="post_<%= post.id %>">
          <%= link_to "show", post, remote: true %>
        </div>

        <div class="post-comments" id="post_comments_<%= post.id %>">
        </div>
    <% end %>
<% end %>

コメント内/_comments.html.erb

<% @comments.each do |comment| %>
    <%= comment.content %>
<% end %>
<%= link_to "hide", '#', class: "hide-comments"  %>

そしてposts/show.js.erbで

$('#post_comments<%= @post.id %>').html('<%= j render "comments/comments" %>')

および assets/javascripts/posts.js (これを必ず application.js に含めてください)

$(document).ready(function() {
    $('.hide-comments').click(function(e) {
      e.preventDefault();
      $(this).parent().hide();
    });
});

backbone.js は、CRUD などのコメントで多くのことを行い、1 つのページにとどまる必要がある場合に最適なツールです。backbone.js を使用してください。そうでない場合は、jQuery を使用してください。

于 2013-02-10T10:33:53.907 に答える