我有一个articles循环,每个循环都有一个comment

目标是使用JS动态/异步显示一个comment

我的问题是:

如何调用/激活下面定义的逻辑?

#welcome/index.haml
- @articles.each do |article|
  = article.title
  - article.comments.each do |comment|
    %comment-content{ :id => "comment-#{comment.id}" }

#welcome/comment.js.erb
// var
var comment = "#comment-<%= params[:comment_id] %>"

// render
$(comment).html("<%=j render 'comment_content' %>")

#welcome/_comment_content.haml
= comment.content


更新:

在尝试解决该问题时,我认为我应该添加以下内容:

class WelcomeController < ApplicationController
    def index
    end

    def comment
        respond_to do |format|
            format.js { render 'comment' }
    end
end

最佳答案

好了,您可以使用AJAX,假设您将在readypage:change上显示注释,以避免出现Turbolinks问题

注意:我将使用erb,因为我对haml感到不舒服。

步骤1:定义路线

为您的AJAX事件创建路线,在这种情况下,我们将创建GET。

#This route will call the action get_one_comment of your articles_controller
get 'articles/get_one_comment'


步骤2:定义您的控制器动作

在您的articles_controller.rb中创建get_one_comment操作,因此,当您的ajax调用该操作时,它将检索正确的信息,您将从您的Ajax操作中发送Article的ID,以便将其作为params[:article_id]使用,并确保操作与控制器回调兼容,有时控制器中的before_action可能会引起问题:

#articles_controller
def get_one_comment
  @article = Article.find params[:article_id]
  @comment = @article.comments.last
  resond_to do |format|
    format.js
  end
end


您是否注意到respond_to块?就像您看到的那样,在您的情况下,此控制器操作将以js.erb格式或js.haml响应。

步骤3:修正标记

Ajax请求中的想法是循环浏览我们的文章,并将文章ID发送到控制器操作,此外,我们还需要设置某种CSS类或ID,以便在我们的响应脚本中放置注释。

#welcome/index.html.erb
<% @articles.each do |article| %>
<div id="article-<%= article.id %>" class="article-block" data-article-id="<%= article.id %>"
<%= article.title %>
<div class="comment-section">
</div>
</div>


步骤4:添加Ajax

现在我们需要创建一个Ajax请求来异步加载注释,我将使用CoffeeScript,在您的assets/javascripts文件夹中选择一个文件,假设我们选择articles.js.coffee,因此在页面加载时,我们将循环浏览所有我们的文章并发送Ajax请求:

#articles.js.coffee
loadOneComment = ->
    $('.article-block').each ->
        $article_block = $(@)
        $.ajax '/articles/get_one_comment',
        type: 'GET'
        dataType: 'script'
        data: {
            article_id: $article_block.data('article-id')
        }
        error: (jqXHR, textStatus, errorThrown) ->
            console.log("AJAX Error: #{textStatus}")
        success: (data, textStatus, jqXHR) ->
            console.log("Worked OK!")

$(document).ready loadOneComment
$(document).on 'page:change', loadOneComment


步骤5:使用响应脚本呈现评论。

创建一个响应脚本,在这种情况下,正如我们在控制器操作中设置的那样,我们将在format.js中进行回答,然后我们需要创建一个get_one_comment.js.erb文件,其中将包含我们的响应脚本。在此脚本中,我们将适当地在页面中放置注释。

#get_one_comment.js.erb
$('#article-<%= @article.id %> .comment-section').append('j render(@comment)');


上面将为页面中的每个文章div呈现部分comments/_comment.html.erb

万一它不起作用,请检查您的JavaScript控制台,我还没有测试过,所以我可能会键入错误,或者是Rails控制台,但是基本上我为您提供了实现它的步骤和正确的方法,您可以自定义AJAX ,例如在其他事件中发送请求,例如滚动,悬停,点击等。

关于javascript - 如何在Rails View 中使用AJAX,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35920911/

10-14 13:39
查看更多