2

私は現在、リストの束を含むページを持っています。各リストにはコメントを追加する機能があります。

生成された_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クラスはすべてのリストに共通であるため、明らかにこれは機能しません。作成したばかりのコンテンツを正しいリストに追加し、新しい追加コメント セクションを表示する方法はありますか?

4

1 に答える 1

0

私はついにそれを修正することができました。控えめなJavaScriptのデバッグは、通常のJSよりも少し難しいです。Google ChromeDevToolのネットワーク機能に感謝します。

私の見解では、私は追加しましたid

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

次に、内create.js.hamlで、変数からIDを取得しました@commentable。これは、コントローラーによって渡され、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 })}")
于 2012-07-19T02:38:38.703 に答える