DOMContentLoadedからturbolinks:loadへ変更

Action Cableの設定でつまずいたことでうまくいかない処理があったので、追記します。
ご指摘やアドバイスがありましたらコメントよろしくお願いします。

行いたいこと

チャットアプリ機能を実装する際に私が参考にしてきた記事ではページ遷移はなく、トップページでチャットのみを行うような記事でした。

今回作成したかったものは、各ページからチャットルームにページ遷移を行いその中でチャットを行うというものです。

できなかったこと

他のページからチャットページへ移動した後にチャットの送信ができなくなっているということでした。
(チャットページでリロードを行うとできました。)

結論から言いますと、以下の部分のコードが作動しないということでした。
1行目のdocument.addEventListener 'DOMContentLoaded', ->はページの
こちらで説明されているようにDOMツリーの構築が完了後に動き出すということだったため、1度処理されればページの遷移を行っても問題ないと思っていました。

chatroom.coffee

document.addEventListener 'DOMContentLoaded', ->
  input = document.getElementById('chat_input') 
  data_user = input.getAttribute("data_user")
  data_room = input.getAttribute("data_room")
  button = document.getElementById('chat_button')
  button.addEventListener 'click', ->
    content = input.value
    App.chatroom.speak(content, data_user, data_room)
    input.value = ''
    return
  return

解決方法

以下1行目のように'DOMContentLoaded'をturbolinks:loadに変更することによって
DOMツリーの構築が完了後に動き出すということから、ページの読み込み時に処理をするように変わり解決しました。

また、遷移先のページで input に何も入っていない(chat_inputというidがない)状態だとUncaught TypeError: Cannot read property ' getAttribute' of undefinedというメッセージがコンソールに現れるのでif文で回避するようにしました。

chatroom.coffee

document.addEventListener 'turbolinks:load', -> #修正部分
  input = document.getElementById('chat_input') 
  if input? #修正部分
    data_user = input.getAttribute("data_user")
    data_room = input.getAttribute("data_room")
    button = document.getElementById('chat_button')
    button.addEventListener 'click', ->
      content = input.value
      App.chatroom.speak(content, data_user, data_room)
      input.value = ''
      return
    return

関連記事

・Action Cableの設定でつまずいたこと
・Action Cableへのidの受け渡し