Question

我目前有一个包含大量列表的页面，每个列表都有添加注释的功能。

以下是生成的_new.html.haml部分和每个列表的结尾

<div class="comment add-comment row-fluid">
  <div class="avatar">
    <img alt="Admin User1" src="http://localhost:3000/assets/DDDDDD.png">
  </div>
  <div class="message">
    <form accept-charset="UTF-8" action="/suggestions/50057a3160de7d361d000061/comments" class="new_comment" data-remote="true" id="new_comment" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="vVw7kLNGF4AiXmOMjryPDI70Mz5paZnW3usdgzxLsik=" type="hidden"></div>
    <fieldset>
      <div class="control-group">
        <div class="controls">
          <textarea cols="40" id="comment_content" name="comment[content]" placeholder="Add a comment..." required="required" rows="20"></textarea>
        </div>
      </div>
      <input class="btn btn-primary" name="commit" value="Post" type="submit">
    </fieldset>
</form>
  </div>
</div>

我能够使用Unobtrusive JavaScript来创建注释，但是当我加载create.js.haml时，我不确定将它附加到哪个DOM对象。

在我的comments/create.js.haml中，我有

$(".add-comment").before("#{escape_javascript(render partial: "comments/show", locals: { :comment => @comment })}")

显然这不起作用，因为add-comment类对所有列表都是通用的。有没有办法可以将我刚刚创建的内容添加到正确的列表中并显示新的添加评论部分？

Answer 1

我终于能够解决它了。调试不引人注目的JavaScript比常规JS更难。感谢Google Chrome Dev Tool的网络功能。

在我的视图中，我添加了id

<div class="comment add-comment row-fluid" id="500614e960de7d313a000189">
  ...
</div>

然后，在create.js.haml中，我从变量@commentable获取了ID，它由控制器传入，转换为DOM元素，然后处理更多的JS。

var div_id = $('.stream-item').find("##{escape_javascript(@commentable.id.to_s)}")
div_id.find("textarea").val("");
div_id.before("#{escape_javascript(render partial: "comments/show", locals: { :comment => @comment })}")

使用Rails + Unobtrusive Javascript向评论列表添加评论

1 个答案: