Rails에서 Ajax로 비동기 통신을 구현하는 연습 ~ 초간이 Todo 앱 만들기 ~

Rails를 공부하고 일찍 6주.
Ajax를 통한 비동기 통신? ? ? 한 상황을 드디어 조금 벗어났기 때문에, 복습도 겸해서 학습한 초간이 Todo 앱에 기능을 추가해 보았습니다.

Todo 앱 개요

텍스트 필드에 입력하고 "Create Todo"버튼을 누르면 Todo 목록을 만들 수 있습니다. 이것을 비동기 통신으로 하고 있어, JavaScript는 이하와 같습니다.

todo.js

$(function() {

  //todoのcontentをliタグでhtmlに追加
  function buildHTML(todo) {
    var html = $('<li class="todo">').append(todo.content);
    return html;
  }

  // CreateTodoボタンが押されたら発火
  $('.js-form').on('submit', function(e) {
    e.preventDefault();  // submitによるフォームの送信を中止
    // テキストフィールドの中身を取得
    var textField = $('.js-form__text-field');
    var todo = textField.val();
    // Ajax発動!!
    $.ajax({
      type: 'POST',
      url: '/todos.json',  //createアクションへ
      data: {
        todo: {
          content: todo  //取得したテキストフィールドの中身をcontentとして送る
        }
      },
      dataType: 'json'  //もちろんjson形式で!!
    })
    .done(function(data) {
      var html = buildHTML(data);  //返ってきたデータをbuildHTMLに渡す↑↑
      $('.todos').append(html);  //作成したhtmlをビューに追加
      textField.val('');  //テキストフィールドを空に
    })
    .fail(function() {
      alert('error')
    });
  });
});

뷰와 컨트롤러는 조금 아래입니다.

index.html.erb

<div class="contents">
  <%= form_for @todo, html: { class: 'form js-form' } do |f|%>
    <%= f.text_field :content, class: 'form__text-field js-form__text-field' %>
    <%= f.submit class: 'form__submit js-submit' %>
  <% end %>
  <ul class="todos">
  </ul>
</div>

todos_controller.rb

class TodosController < ApplicationController
  def index
    @todo = Todo.new
    @todos = Todo.order('created_at ASC')
  end

  def create
    @todo = Todo.new(todo_params)
    if @todo.save
      respond_to do |format|
        format.html { redirect_to :root }
        format.json { render json: @todo }  #jsonで送られてきたら@todoをjsonで返す
      end
    else
      render :index
    end
  end

  private
  def todo_params
    params.require(:todo).permit(:content)
  end
end

done 버튼 추가

추가 기능으로서, todo 리스트 옆에 done 버튼을 추가하고, done 버튼을 누르면 「todo 리스트가 청색으로 변화」＋「done 버튼이 삭제」되도록(듯이) 했습니다.

todo.js

$(function() {

  //idをtodoレコードのidで指定
  function buildHTML(todo) {
    var html = $(`<li class=todo id=${todo.id}>`).append(todo.content);
    return html;
  }

  $('.js-form').on('submit', function(e) {
    //中略
    $.ajax({
    //中略
    })
    .done(function(data) {
      var html = buildHTML(data);
      $('.todos').append(html);
      //doneボタンをaタグで追加(この時data-idにtodoレコードのidを指定)
      var button = $(`<a href="" class="done-button" data-id=${data.id}>`).append('done');
      $('.todos').append(button);
      textField.val('');
    })
    .fail(function() {
      alert('error');
    });
  });

  //doneボタンをクリックで発火
  $('.todos').on('click', '.done-button', function(e) {
    e.preventDefault();  //aタグのリンクを中止
    $(this).remove();  //doneボタンを削除
    var id = $(this).data('id');  //セットしたtodo.idを取り出す
    $(`#${id}`).addClass('blue');  //関連するtodoリストを青色に変更
  })
});

blue 클래스의 문자색은 파란색으로 지정

todos.scss

.blue {
  color: blue;
}

포인트

간단하게 포인트를 받아 둡니다.

동적 요소에 이벤트 설정

이번 append에서 추가한 a요소를 클릭했을 때 이벤트를 설정했습니다.
이 경우 부모 요소에 이벤트를 설정해야합니다!
참조 사이트

맞춤 데이터 속성

html 요소에 data-*의 형태로 임의의 속성을 추가할 수 있다!
설정한 값은 jQuery로 data(),attr()로 취득할 수 있다!
참조 사이트

템플릿 레터럴 표기법

JavaScript로 문자열을 백오토(`)로 둘러싸면 ${}내에서 변수나 계산식을 사용할 수 있다!
참조 사이트

완성! !

그럼 움직임을 봅니다.

할 수 있었습니다! 이것으로 저녁에 있을 수 있을 것 같습니다.
고마워요.