Railsでの非同期更新処理CRUD DOM操作

今日は、現在作成しているインスタクローンなアプリのコメント機能を実装していました。

コメント機能は、Ajaxを使って非同期更新で実装しています。 それぞれのDOM操作についてまとめます。  ※エラーハンドリングは省略しています

create.js.slim

  | $('.comments-box').prepend(
      $("#{escape_javascript(render 'comments/comment', comment: @comment)}")
      .hide().fadeIn('slow')
    );
  | $('.input-comment-body').val('');

• comments-box の先頭にcomments/_comments.html.slim を入力したコメントの内容で追加
• 追加するときのアニメーションはfadeIn()メソッドを使用します。
• 2行目は、formの内容をクリアしています。

destroy.js.slim

| $('#comment-#{@comment.id}').fadeOut('fast', function(){
    $(this).remove();
  });

• id が　#comment-#{@comment.id} の要素を削除します
• 単純に remove().fadeOut()のようにしてもfadeOutが効かなかったため、調べたところ、fadeOutの引数として、removeのメソッドを利用すると効くことがわかりました。

update.js.slim

  | $("#comment-#{@comment.id}").html(
      $("#{escape_javascript(render 'comments/comment', comment: @comment)}")
      .hide().fadeIn('slow')
    );
  | $("#comment-edit-modal").modal('hide');

• updateはhtmlメソッドを使って、 コメントの中身を入れ替えます。ちょっと余計かなと思いましたが、どこが変わったかわかりやすいのでアニメーションをつけました。
• .modal('hide')で更新後、編集のmodalを消しています。