[Rails]gem "gon"을 사용해 보았습니다. Rails 측에서 정의한 변수를 자바스크립트에 간단하게 전달할 수 있습니다.

7454 단어 gon초학자RubyRails

개시하다


Rails 앱을 만드는 과정에서 Rails 측에서 정의한 변수를 JavaScript에 넘기려고 찾아봤는데gon 사용이 편리한gem이 상당히 있어서 가져왔어요.

이 보도에 도움이 되는 사람

  • JavaScript 측에서도 Rails 측에서 정의한 변수를 사용하고자 하는 쪽
  • 이 보도의 장점

  • gon Rails가 정의한 변수를 사용하여 Javascript
  • 에 전달할 수 있음

    컨디션

  • macOS Catalina 10.15.1
  • zsh: 5.7.1
  • Ruby: 2.6.5
  • Rails: 5.2.3
  • Docker: 19.03.5
  • docker-compose: 1.24.1
  • gon: 6.3.2
  • 짐 곤이 뭐예요?


    단순히 Rails 애플리케이션에서 JavaScript에 변수를 전달할 수 있는gem입니다.
    Rspec에 변수를 전달할 수도 있어 매우 편리합니다.

    GitHub - gazay/gon: Your Rails variables in your JS
    If you need to send some data to your js files and you don't want to do this with long way through views and parsing - use this force!
    (대략) 자바스크립트에 어떤 데이터를 보낼 필요가 있다면 번거로운 사진을 보지 말고 이걸로 하세요!
    라고 소개했다.

    설치하다.


    Gemfile
    gem 'gon'
    
    bundle install
    

    사용법


    Usage example · gazay/gon Wiki · GitHub

    1. View에서 읽기


    app/views/layouts/application.html.erb
    <head>
      <title>some title</title>
      <%= include_gon %>
      <!-- include your action js code -->
    
    title는 라벨 아래javascript_include_tag보다 높다.
    ※ 공식 위키, 다음 방법은 순조롭게 진행할 수 없습니다.
    app/views/layouts/application.html.erb
    <head>
      <title>some title</title>
      <%= Gon::Base.render_data %> 
      <!-- include your action js code -->
    

    2. Controller에서 사용하는 변수를 gon에 설정합니다.


    any_controller.rb
    @your_int = 123
    @your_array = [1,2]
    @your_hash = {'a' => 1, 'b' => 2}
    
    # 上記の変数をJavaScriptで呼び出したいなら
    # 以下のように頭に`gon`をつけて変数定義する
    gon.your_int = @your_int
    gon.your_array = @your_array
    gon.your_hash = @your_hash
    
    # `gon`をつけた後に別の変数定義に活用することも可能。
    gon.your_other_int = 345 + gon.your_int
    
    # `gon`をつけたもの同士で配列に追加も可能。
    gon.your_array << gon.your_int
    gon.your_array # > [1, 2, 123]
    
    # `all_variables`で`gon`をつけた全ての変数がハッシュで取り出せる
    gon.all_variables # > {:your_int => 123, :your_other_int => 468, :your_array => [1, 2, 123], :your_hash => {'a' => 1, 'b' => 2}}
    
    # `clear`で全変数をクリアできる
    gon.clear # gon.all_variables now is {}
    
    gon더하면 돼요. 간단해요.

    3. JavaScript에서 호출


    any.js
    alert(gon.your_int)
    alert(gon.your_other_int)
    alert(gon.your_array)
    alert(gon.your_hash)
    
    방금 컨트롤러 쪽에서 정의한 것은 직접 사용할 수 있다.
    aleat는 스테이크입니다.
    예: 배송current_user
    current_user.js
    alert(gon.current_user.name)
    alert(gon.current_user.email)
    alert(gon.current_user.id)
    
    이렇게 되면 이름과 메일 주소 등 원하는 키를 지정하면 가격을 받을 수 있다.
    매우 알기 쉽고 편리하다.

    끝말


    끝까지 읽어주셔서 감사합니다
    또한input 라벨을 통해 변수를 전달하거나 JSON을 사용하여 변수를 전달하는 보도를 발견했습니다gon. 더 간단하게 변수를 전달하면 가볍습니다

    참조된 웹 사이트(지금까지 지원해 주셔서 감사합니다)

  • GitHub - gazay/gon: Your Rails variables in your JS
  • RailsC3.js × goo에 차트 표시 - Qiita
  • gon의 Rails와 Javascript를 사용한 연합 - Qiita
  • 좋은 웹페이지 즐겨찾기