【RailsでLINEを作る】クリックでトークを表示させる
今日は恐ろしくやる気が出ず、ブログの更新だけになります...
昨日、一昨日で友だちをクリックしたときにトーク内容をJSで更新させるようにしました。
CSSをあまりいじってないので雰囲気だけ...
流れとして
友だち一覧を取得しeachで表示 ↓ 友だち1つ1つにパラメータとしてIDを持たせる ↓ link_toを非同期対応させて、同じページを呼び出す ↓ パラメータを元にコントローラの動きを分ける ↓ 部分テンプレートにしてあるトークを書き換える
まずindexのviewに部分テンプレートを記述します
talk_rooms/index.html.slim .talk-room-index__talk .user-talks #talks.user-talks__talk = render partial: "users/user-talk-index", locals: { user: @user, room: @room, talks: @talks}
id="talks"をターゲットにするのでidはつけておきます
次に、each文で表示する友だちにパラメターを持たせます
talk_rooms/index.html.slim .talk-rooms__list--friends span.select-friends-list 友だち ul - current_user.followings.each do |follower| li class="follower" = link_to talk_rooms_path(follower: follower.id), class: "user-talk-show", remote: true do = render partial: 'users/attachment', locals: { user: follower} p = follower.name
link_toのパスの後に(follower: follower.id)と書くことで、リンク先にfollowerのidをparams[:follower]として渡すことができます
パスは同じviewなのでtalk_tooms_pathにしてあります
次にコントローラー
talk_rooms_controller.rb def index unless params[:follower].blank? @user = User.find_by(id: params[:follower]) @current_room = RoomUser.where(user_id: current_user.id) @another_room = RoomUser.where(user_id: @user.id) unless @user.id == current_user.id @current_room.each do |cr| @another_room.each do |ar| # ルームが存在する時 if cr.talk_room_id == ar.talk_room_id @is_room = true @room = TalkRoom.find_by(id: cr.talk_room_id) @talks = @room.talk end end end # なければ新規作成 unless @is_room @room = TalkRoom.new @room_user = RoomUser.new end end end @users = User.where.not(id: current_user.id) end
普通にindexを表示した時点ではパラメータがないので@users = User.where.not(id: current_user.id)だけを渡します
友だちがクリックされた時に初めて unless params[:follower].blank?を実行し変数をviewに渡します
そして書き換えるjsファイルを作成
talk_rooms/index.js.erb $('#talks').html("<%= j(render partial: 'users/user-talk-index', locals: { user: @user, room: @room, talks: @talks}) %>");
部分テンプレートの中身を作成
users/_user-talk-index.html.slim .user-talk-index - unless user.blank? .user-talk-index__name p = "#{user.name}" .user-talk-index__talks #talk - talks.each do |talk| p = talk.talk .user-talk-index__form input[type="text" id="talk-form" data-behavior="room_speaker" data-user="#{current_user.id}" data-room="#{room.id}" placeholder="メッセージを入力"] - else .non-talk-case p トークをはじめよう!
-unless user.blank?でクリックされてパラメータが渡される前は、elseの部分を表示させるようにしてあります
今回かなり沼ったのは素直にlink_toにパラメータを持たせず、dataを使おうとして混乱してしまった所です
シンプルに部分テンプレートで書き換えるのが間違いなさそうです
次回はインクリメンタルサーチを実装した記事を書いていきます。