remote:true는 aax의 게시물을 켜서 자체 검사합니다.

뭐 공부 해요?

Rails로 애플리케이션을 만들고 있습니다.제목과 같이 remote: true 투고할 수 있는 표를 만들었다.
처음이 아니어서 미끄러웠지만 절차와 생각을 제대로 파악하지 못해 자신의 노트로 적어 두었다.
또한 실행 환경은 다음과 같다.
- ajax- Rails 5.2.3

참고문

실시할 때, 아래의 보도를 매우 참고하도록 허락해 주십시오.
[Rails] remote: true에서 Ajax 양식을 전송하는 방법은?
이번 절차도 ↑ 쪽과 똑같으니 자세한 설명을 보고 싶은 사람은 위의 보도를 보는 것이 좋다.(이것은 단지 나의 필기일 뿐이다...)

구현 방법

만든 물건

이번에 만들고 싶은 것은 이런 느낌으로 투고에서 마음대로 논평할 수 있는 구조다.DB 구조상Ruby 2.6.0 표에 가는 밧줄posts의 상황이 있다.(이미지가 제작 중이기 때문에 조만간 다시 삽입될 수 있습니다.)

remote:true 형식으로 해볼게요.

우선 평소처럼 투고 평론 양식을 만들어 봤다.또한 장식에 사용되는class와 이번 설치와 무관한 요소를 생략했다.(아래, 모든 코드는 동일)

= form_with model: [@post, @comment] do |f|
  = f.text_field :text
  = f.submit '投稿'

comments는 기본값form_with이기 때문에 remote: true이 없고 매우 간단한 형식입니다.

controller

comments_controller.rb

def create
  @comment = @post.comments.build(comment_params)
  @comment.save!
end

컨트롤러도 간단해졌다.
한편, 이번 주요 목적은 local: true의 행동을 확인하는 것이다
1) redpond_to,format으로 html와 js의 처리를 분리
2) 저장할 수 없는 경우@comment 오류 처리
지원되지 않는 문제
2) 다른 일도 하고 싶지만 실제로 설치할 때도 상기 두 가지를 고려한다.
한 마디로 하면 위의 컨트롤러는 js 형식의 remote: true을 호출할 것이다.

create.js.erb

그나저나 create.js.erb 귀에 거슬리는 파일 이름이죠.이 파일이 무엇을 할 수 있는지 말하려면(이하 앞서 소개한 이 문장에서 인용한 것입니다.)

실행 파일에 설명된 JavaScript 코드

ERB 태그 사용 가능

인스턴스 변수 사용 가능

상술한 조작을 할 수 있다.편하네
따라서 상기 기재된 **.js.erb 중에서 예를 들면 다음과 같다.
comments/create.js.erb

$('.comments').append("<%= @comment.text %>");

이것만으로도 이런 보기를 만들 수 있다.

모양은 아직 완벽하지 않지만 끈적끈적한 투고가 나타난다

추가 1: 게시할 뷰 정보

그리고 순서가 앞뒤로 바뀌었어요...이번 투고의 목적지 보기는 이런 구조다.

.comments
  = render @comments

create.js.erb 학급 아래에서 .comments 내용을 전개하고 호출합니다.이런 사람 보세요 이 문장
전에 쓴 이 코드로.
comments/create.js.erb

$('.comments').append("<%= @comment.text %>");

@comments 중의 .comments 그룹의 끝에 투고한 새 @comment 를 추가합니다.

보충 2: 실제 쓰기 코드

실제로 상술한 코드만으로 투고한 후 표에 투고한 평론을 계속 남긴다.그래서 실제로 다음과 같은 코드를 썼다.

= form_with model: [@post, @comment], class: 'js-comment-form' do |f| #追記
  = f.text_field :text
  = f.submit '投稿'

표에 @comment 이 등급을 더하다
comments/create.js.erb

$('.comments').append("<%= @comment.text %>");
$('.js-comment-form')[0].reset();

텍스트를 추가한 후 컨텐트를 재설정하고 있습니다.

create.js.erb에서 부분 호출

어쨌든, 이렇게 하면 비동기적으로 투고할 수 있고, 이후에 외관을 좀 더 풍부하게 하려고 한다.
결론적으로 말하자면, 쓴 코드는 다음과 같다.
comments/create.js.erb

$('.comments').append("<%= j(render 'comment', comment: @comment) %>");

먼저 js-comment-form 부분에서 .js-comment-form 부분을 호출합니다.
(앞의 보충 1로 돌아가면 이번 투고 평론의 목적지 보기는 다음과 같다. 따라서 render 'comment' 이런 부분이 존재한다.)

.comments
  = render @comments

그리고 comments/_comment 방법에서 _comment 코드를 전의합니다.이 부근에서 이 두 편의 보도를 읽고 이해를 깊게 했다.

[Rails] remote: true에서 Ajax를 보낼 수 있는 방법은? -일부 템플릿 호출 및 업데이트

What does the j function in Rails do?

부분의 내용을 상세하게 생략했지만 대체로 이런 느낌이었다.여기에는 j와JavaScript 등으로 쓰는데 아무런 문제가 없다.
comments/_comment.html.slim

div
 = アイコンの画像
 = comment.user
 div
   = comment.text
    div
      = 削除アイコン
      = 編集アイコン

완성!

지금까지의 설치는 상술한 이미지의 설치를 실현했다.

좀 못하지만 일단락될 때 기사를 써서 실제 설치에 대한 이해를 깊게 했고 재구성도 했다
앞으로도 오류 처리와 편집, 삭제의 비동기적인 실시를 위해 노력할 것입니다.