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中单击它时，它会被传递。 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) )
    }
  });
});

前端挑战Ruby on Rails

1 个答案: