먼저

자기가 배운 내용을 써내다.
기본적으로 자신이 이해할 수 있는 내용이니 용서해 주세요.
또 잘못된 점이 있으면 댓글로 지적해 주세요.
(확인) 식별된 컨텐트가 실행 전에 태그해야 하는 컨텐트입니다.

이 글의 주의사항

여기에 괜찮은 기능과 댓글 기능의 비동기적인 통신화된 노트가 적혀 있습니다.
기술된 기능과 주석 기능이 없는 설치 부분
지겨울 때까지 개인의 노트로'이종 통신'을 기술했다.
용서해 주세요.

index

원래 비동기 통신은

Ajax는

render 및 redirectto의 차이

설명 예

이른바 비동기 통신

대략적으로 말하면'이미지 이동이 없는 통신'이다.
즉, 동기화 처리는 순간 화면이 하얗게 변하고 화면을 전환하는 것이다.

이른바 Ajax

Asynchronous JavaScript+XML의 약칭입니다.(Asynchronous: 비동기식)
JavaScript의 비동기식 통신을 사용하여 웹 서버와 데이터를 교환할 수 있습니다.
그래서 이번엔 js.eb 파일을 사용하는 비동기 통신을 시도해 보십시오.

render 및 redirect -to의 차이

js.erb 파일을 사용하기 위해render를 사용하지만, 같은 동작을 하는redirectto와의 차이를 가장 잘 알아야 한다.
대충 설명하자면'MVC의 이동 방식이 다른 전환 방법'이라는 느낌이 든다.

새 투고 후 상세 화면으로redirectto의 동작

빨간색 레드to에서 알 수 있는 동작은 XXXshow 이전으로 되돌아갈 수 있습니다.
render의 경우,view를 통해 직접 출력합니다.

설명 예

기능 주석 달기

주석 표시줄은render로 기술합니다.
show.html.erb

<tbody id="comments_index"> # js発火させる為、id指定
  <%= render 'memos/comment', memo: @memo %> # @memoはcommentコンロトーラーとmemoコントローラー共通のデータ
</tbody>

부분 템플릿에 기술하다.
memos/_comment.html.erb

<% memo.memo_comments.each do |memo_comment| %>
<tr>
  <td><%= attachment_image_tag memo_comment.user ,:profile_image, :fill, 50, 50, format: 'png', fallback: "no_image.jpg", size:'50x50' %></td>

  …

</tr>
<% end %>

여기까지는 아직 걸음걸이가 없다.
이번 경우라면 새 투고(create)를 처리하고 투고(destroy)를 삭제할 때 비동기적으로 바뀌었으면 좋겠습니다.
views/memo_commnets/create.js.erb

$('#comments_index').html("<%= j(render 'memos/comment', memo: @memo) %>", ); # 発火して欲しい箇所のID記述と、render記述
$(".text_field").val(""); # 発火した際のtext_fieldを空白に更新するように指定

views/memo_commnets/destroy.js.erb

$('#comments_index').html("<%= j(render 'memos/comment', memo: @memo) %>"); # 発火して欲しい箇所のID記述と、render記述

또한 memocomments의 controller에 '@memo' 가 정의되어 있지 않기 때문에 추가로 기술합니다.
controllers/memo_commnets_controller.rb

def create
    @memo = Memo.find(params[:memo_id])
    @memo_comment = current_user.memo_comments.new(memo_comment_params)
    @memo_comment.memo_id = @memo.id
    if @memo_comment.save
      # redirect_to memo_path(@memo)
    else
      @user = @memo.user
      @newmemo = Memo.new
      render template: "memos/show"
    end
  end

  def destroy
    # binding.pry
    @memo = Memo.find(params[:memo_id])
    # ページからコントローラーにコメントのIDを持ってくる・・・
    # /memos/#{@memo.id}/memo_comments/#{@memo_comment.id}/を作り上げる＝memo_comment.idを探して、デストロイさせる！！
    @comment = MemoComment.find(params[:id])
    @comment.destroy
    # redirect_back(fallback_location: root_path) #非同期通信の為削除
  end

메모:@memo에서 정의된 내용은 반드시 같은 데이터 정보여야 합니다.
그리고 그때tag로 기술한 경우formwith 기술이 필요합니다.
이유는'기본remote:진짜'입니다.(XML HTTPRequest 객체 요청이 전송됨)
주의점
remote: 정말 걸리면 Redirect-to가 효과가 없으니 서두르지 마세요.
순조롭게 진행되면pry-baybeggem 등으로 한 번 멈추고 변수와 파라미터가 정확하게 통과되었는지 확인하면서 조정한다.

잠이 잘 오는 경우.

주석 기능과의 비동기 통신을 거의 변하지 않는 처리를 실시하지만 몇 가지 요점이 있다.
POINT

each 문장에 반복적으로 표시되는 경우 점화하고 싶은render 주위의div 라벨에 각자의 ID

를 추가합니다

기능을 충분히 이해한 비동기 통신의 범위

show.html.erb

<% @memos.each do |memo| %>
  <tr>
    <td>
      <div id="likes_buttons_<%= memo.id %>">
        <%= render 'memos/favo', memo: memo %>
       </div>
     </td>
   </tr>
<% end %>

'어떤 투고가 잘 되고 싶은지'판별을 하기 위해서.
"likes buttons<%=memo.id%>"에서 each 문이 중복되는 ID를 할당합니다.
그리고 일부 템플릿에 기술하십시오.
memos/_favo.html.erb

<% if user_signed_in? %>
  <% if memo.favorited_by?(current_user) %>
    <%= link_to memo_favorites_path(memo), method: :delete, remote: true do %>
      <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: red;"></span>
    <% end %>
  <% else %>
    <%= link_to memo_favorites_path(memo), method: :post, remote: true do %>
      <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: gray;"></span>
    <% end %>
  <% end %>
  <%= memo.favorites.count %> イイね！
<% end %>

괜찮은 기능에 관하여 본 보도는 설명하지 않았으니 양해해 주십시오.
views/favorites/create.js.erb

$('#likes_buttons_<%= @memo.id %>').html("<%= j(render 'memos/favo',memo: @memo) %>");

views/favorites/destroy.js.erb

$('#likes_buttons_<%= @memo.id %>').html("<%= j(render 'memos/favo',memo: @memo) %>");

조금은 느꼈을지도 몰라, XXX.js.erb의 기술은 다음과 같다.
$('발화처 ID 지정').>("<%=j(render 위치 지정);
이번 경우 메모(memo)와 관련된 평론(commmnet)과 괜찮다(favorite)가 존재한다.
렌더의 위치를 지정할 때'memo 컨트롤러'와'평론과 괜찮은 컨트롤러'에서 memo: @memo는 같은 내용을 대입해야 합니다!
가령 메모 컨트롤러@memo=메모.find(param[:id])나common 컨트롤러@memo가 지정되지 않으면 js는 화를 내지 않습니다.(즉, 동기화 통신 상태를 유지함)
이러한 뜻을 이해하면 외부 API에서 얻은 데이터를 DB에 저장하지 않은 상태에서 연결시켜 비동기식 통신으로 만들 수 있다.
이것에 관해서는 언제 다시 투고합니까?

추가가 있으면 계속 업데이트됩니다.

신출내기로서 파이팅.