渲染嵌套/线程注释 [英] Rendering nested/threaded comments

问题描述

遵循此 SO帖子，我正在尝试使用acts_as_tree rails插件呈现缩进注释，但没有成功.

Following this SO post, I am trying to render indented comments using the acts_as_tree rails plugin with no success.

我相信问题在于这种方法(我不理解):

I believe the problem lies with this method (which I don't understand):

def indented_render(num, *args)
  render(*args).gsub(/^/, "\t" * num)
end

此方法替代什么?我的部分如下:

What does this method substitute? My partial is as follows:

%div{:id => "comment_#{comment.id}"}
  = comment.body
  = render :partial => 'comments/comment', :collection => comment.children
  - unless comment.children.empty?
    = indented_render 1, :partial => 'comments/comment', :collection => comment.children

但是，没有任何行缩进.我究竟做错了什么?有没有更好的方法来呈现评论?

However, none of the lines are indented. What am I doing wrong? Is there a better way to render the comments?

更新:这是生成的html:

Update: This is the generated html:

<h1>Listing comments</h1>
<table>
  <tr>
    <td>
        <div id='comment_1'>
          (152) Facebook version of you: 400 friends. Real version of you: 4 friends
        <div id='comment_2'>
          (0) Well played.
            <div id='comment_3'>
              (0) I used to. Then I got married.
                <div id='comment_4'>
                  (17) math is hard
                    <div id='comment_5'>
                      (1) What's a math?
                        <div id='comment_6'>
                          (1) This made coke come out my nose.
                            <div id='comment_7'>
                              (2) So maybe I wasn't the best with fractions.
                            </div>
                            <div id='comment_8'>
                              (1) That sounds terribly painful. Please accept my apologies. Isn't it supposed to be going in your nose, not out?
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

推荐答案

我认为这些选项卡只是为了使生成的HTML更漂亮.看起来结果HTML正确地嵌套以生成树状结构，您只需要一些CSS.首先，您可能希望在注释包装器<div>上创建一个类，因此请更改以下内容:

I think the tabs are just to make the generated HTML a bit prettier. It looks like the resultant HTML is properly nested to produce a tree-ish structure, you just need some CSS. First of all, you probably want a class on the comment wrapper <div>s so change this:

%div{:id => "comment_#{comment.id}"}

对此:

%div{:id => "comment_#{comment.id}", :class => 'comment'}

然后，在某些CSS中，尝试以下操作:

And then, in some CSS somewhere, try this:

.comment {
    margin-left: 20px;
}

这应该使嵌套的<div>缩进以让您从树结构开始.

That should indent the nested <div>s to give you a start at a tree structure.

看起来您正在使用HAML，但我的HAML并不是很好，但是希望以上内容足够接近，可以为您提供有用的信息.

Looks like you're using HAML and my HAML isn't that great but hopefully the above is close enough to correct to get you something useful.

这篇关于渲染嵌套/线程注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！