前端挑战Ruby on Rails

Question

在博客应用中，我希望“ Next Comment按钮在用户单击后显示下一个（实例）评论。

我已经定义了该方法并且可以在Comment模型中工作，所以我的问题是面向前端的。

• 如何动态显示最近的评论？ 意思是，rails知道它是哪个注释，因此它能够在线显示下一个注释。

• 如何使其显示在%comment html元素中？ （AJAX？）

welcome#index ：

- @articles.each do |article|
      .article
            %comment= article.comments.last.text
            = link_to "Next Comment", welcome_next_comment_path

welcome_controller ：

class WelcomeController < ApplicationController

 def index
    ...
 end

 def next_comment
    find_comment
    article.comments.next(@comment)
 end

private 

 def find_comment
    ...
 end
end

Answer 1

我还没有测试过，但是它应该可以工作（给我一些打字错误）。 至少它将指导您如何实现自己的愿望

您的Next Comment链接具有当前的评论ID，当您在jQuery / ajax中单击它时，该ID就会传递。 ajax方法可防止访问链接的默认行为，并获取要查找的html页面的精确部分（页面上的注释），并将其附加到您单击的链接的容器中。

# app/controllers/welcome_controller.rb
  def next_comment
    find_comment
    @next_comment = article.comments.next(@comment)
  end


# app/views/welcome/next_comment.haml
#comment
  .article{id: "comment#{@next_comment.id}"}
    %comment= @next_comment.text
    = link_to "Next Comment", welcome_next_comment_path, data: {id: @next_comment.id, hook: 'comment-link'}


# your_view.haml
- @articles.each do |article|
  - comment = article.comments.last
  .article{id: "comment#{comment.id}"}
    %comment= comment.text
    = link_to "Next Comment", welcome_next_comment_path, data: {id: comment.id, hook: 'comment-link'}


# app/assets/javascripts/application.js
$("[data-hook='comment-link']").click(function(event)) {
  event.preventDefault();
  var url = $(this).attr('href');
  var id = $(this).data('id');
  var container = $('#comment' + id);
  $.ajax({
    type: 'GET',
    url: url,
    success: function(html) {
      container.append( $('#comment', html) )
    }
  });
});