前端挑戰Ruby on Rails

Question

在博客應用程序中，我希望Next Comment按鈕在用戶點擊該按鈕時顯示下一個（實例）註釋。

我有定義的方法和在Comment模型中工作，所以我的問題是前端導向。

• 如何動態顯示最新評論？這意味着，軌道知道它是哪個評論，所以它能夠顯示下一條評論。

• 如何讓它出現在html元素中的%comment？ （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)) 
    } 
    }); 
});