:remote => trueとは

はい、こんばんは。

 

本日の梅田はゲリラ豪雨がすごかったですね。

 

早めに帰宅しようとしたのが裏目に・・・あえなく教室に引き返し勉強することになりました・・・。

 

きっと神様からの警告なんだと思い、気をとり直して勉強に励みました。

(お前はまだまだ勉強せなあかん!!!とね)

 

ということで本日の振り返りです!!!

 

本日の振り返りは:remote => trueです。(ハッシュロケット=>は好まれないので要注意!!remote: trueが良いかな。)

 

:remote => true(remote: true)とは、非同期通信を簡単に実装してくれるものとお考えください。

 

私のMaaanga!!!にも簡単に実装できました。

 

<iframesrc=”https://api.gyazo.com/player/9673e49b58eca99c1cdfadc10a72ec53“width=”960″height=”532″frameborder=”0″webkitallowfullscreenmozallowfullscreenallowfullscreen>gyazo.com

 

以上のようになりました。

 

はい、なんと通常なら10行以上かかってしまう記述をな、な、なんと!!1〜2行程度の記述で終わらせてしまうのです。

 

まず、使用の対象ですが、以下になります。

 

form_for

form_tag

link_to

button_to

 

(form_withにも使えると思いますが、検証しておりませんので、ここでは省略させていただきます。)

 

フォームを送信できる機能に対して実装できるのですね。

 

以下、流れになります。

 

1.コントローラに定義

f:id:g1034725:20181205004539p:plain

2.機能を実装したいビュー画面の直下に「アクション名.js.erb」のファイルを作成。

ここではコメントを投稿して保存、反映させる機能ですので、createアクションですね。コメントですので、app/views/comment/create.js.erbとします。

 

3.$(‘追加したい場所’).append(`追加したい部分`)

f:id:g1034725:20181205004707p:plain

この場合、.appnend()を用いているので、追加したい部分の一番後ろに追加するという指定になります。

一番上に追加したい場合は.prepend()を用いる。 

このステップを踏むと、トップのGyazo

のようになります。

 

めちゃくちゃ簡単な方法なので、皆様もぜひお試しください!!

 

この非同期通信が設定できて、初めてrailsが楽しい!!!と感じました!!!

 

これからも頑張ります!!

 

コメント

タイトルとURLをコピーしました