오늘 한 일

Rails 튜토리얼
· 14 장에서 모르는 부분을 다시 조사
· 지금까지의 학습 이력 정리
・Rails 튜토리얼 2주째 1, 2장

학습 이력

다음은 14장에서 모르는 부분의 재검토

아약스

서버와의 비동기 통신으로 웹 페이지의 한 부분만 변경하는 기능.

Ajax를 사용한 후속 양식

<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>

remote: true
Ajax를 사용한 통신을 수행하는 옵션 설정.

html과 ajax의 차이

html: 전체 페이지 렌더링
Ajax:js 파일만 렌더링

respond_to 메소드

respond_to do |format|
  format.出力形式
end

クライアントからの要求に応じて、フォーマットを変更する

respond_to do |format|
  format.html { redirect_to @user }
  format.js
end

※この時、全部が実行される訳ではなく、どちらかが実行される。

의문:
이 분기 처리는 js 파일이 있으면 js 파일을,
아니면 기본적으로 HTML을 렌더링하는 해석으로 좋을까요?

format.js

format.js는 액션과 이름이 같은 js.erb 파일을 호출합니다.

def create 때 : create.js.erb
def destroy 시간: destroy.js.erb

js.erb 파일을 다시 작성하려는 위치

app/views/users/_follow_form.html.erb

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

이 중
<% if current_user.following?(@user) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
follow와 unfollow를 페이지를 이동하지 않고 다시 작성하고 싶습니다.

follow_form에 액세스하는 방법과 html 메소드

$("#follow_form").html("foobar")

$("#follow_form"): # 심볼을 사용하여 ID 지정
.html("foobar"): 위에서 지정한 범위의 html을 foobar로 바꾸기

js.erb 파일

app/views/relationships/create.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %>');

팔로우에 성공한 후 unfollow 버튼으로 전환,
followers의 카운트수도 갱신

app/views/relationships/destroy.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
$("#followers").html('<%= @user.followers.count %>');

팔로우 해제에 성공한 후 follow 버튼으로 전환,
followers의 카운트수도 갱신