jQueryを使用してcoffescriptに値を渡す方法

Question

ユーザーがチャットするためのダイナミックチャネルを作成しようとしていますが、room.coffeeファイルのApp.cable.subscriptions.createコールにroom_idを渡すことができません。 jQueryを使用して値を取得できない理由を明確にするための助けがあれば、非常に役に立ちます。

これは私が戻ってコンソールで受け取るものです：

RoomChannel is transmitting the subscription confirmation 
RoomChannel is streaming from room__channel 

RoomsController

class RoomsController < ApplicationController 
    before_action :authenticate_user! 

    def show 
    other_user = User.find(params[:id]) 
    title = [other_user.id.to_s, current_user.id.to_s].sort!.join("-") 
    @room = Room.where(title: title).first 
    if @room.nil? 
     @room = Room.create! title: title 
    else 
     @messages = Message.where(room_id: @room[:id]) 
    end 
    end 

end 

show.html.erb

<h1>Chat Room</h1> 
<div id="messages"> 
    <% if @messages.blank? %> 
    <div id="no_messages_yet"> 
     <p>No messages yet...</p> 
    </div> 
    <% else %> 
     <%= render @messages %> 
    <% end %> 
</div> 
<form> 
    <label>Say something:</label><br> 
    <input type="text" data-behavior="room_speaker"> 
    <input type="hidden" value="<%= @room[:id] %>" id="room_id"> 
    <input type="hidden" value="<%= current_user[:id] %>" id="user_id"> 
</form> 

ビュー/メッセージ/ _message.html.erb

<div class="message"> 
    <p><%= message.content %></p> 
</div> 

room.coffee

$(document).ready -> 
    room_id = $("#room_id").val() 
    console.log(room_id) 
    // => 1 
    // When I try and pass 'room_id' as the value for room_id:, I get an error stating the variable is not recognized. 
App.room = App.cable.subscriptions.create {channel: "RoomChannel", room_id: $('#room_id').val()}, 
    connected: -> 
    # Called when the subscription is ready for use on the server 

    disconnected: -> 
    # Called when the subscription has been terminated by the server 

    received: (data) -> 
    $('#messages').append data['message'] 
    # Called when there's incoming data on the websocket for this channel 

    speak: (message, room_id, user_id) -> 
    @perform 'speak', message: message, room_id: room_id, user_id: user_id 

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) -> 
    if event.keyCode is 13 # return = send 
    App.room.speak event.target.value, $('#room_id').val(), $('#user_id').val() 
    event.target.value = "" 
    event.preventDefault() 

RoomChannel

class RoomChannel < ApplicationCable::Channel 
    def subscribed 
    stream_from "room_#{params[:room_id]}_channel" 
    end 

    def unsubscribed 
    # Any cleanup needed when channel is unsubscribed 
    end 

    def speak(data) 
    m = Message.new 
    m.user_id = data["user_id"] 
    m.room_id = data["room_id"] 
    m.content = data["message"] 
    m.save! 
    end 
end 

message.rb

class Message < ApplicationRecord 
    after_create_commit { MessageBroadcastJob.perform_later self } 
end 

ジョブ/ message_broadcast_job.rb

class MessageBroadcastJob < ApplicationJob 
    queue_as :default 

    def perform(message) 
    ActionCable.server.broadcast "room_#{message.room_id}_channel", message: render_message(message) 
    end 

    private 
    def render_message(message) 
    ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message }) 
    end 
end 

Answer 1

場所を$(document).readyコール内部の機能このような何か。インデントと空白については、coffeescriptは非常に面倒です。

$(document).ready -> 
    room_id = $('#room_id').val() 
    App.room = App.cable.subscriptions.create {channel: "RoomChannel", room_id: room_id}, 

    connected: -> 
     # Called when the subscription is ready for use on the server 

    disconnected: -> 
     # Called when the subscription has been terminated by the server 

    received: (data) -> 
     $('#messages').append data['message'] 
     # Called when there's incoming data on the websocket for this channel 

    speak: (message, room_id, user_id) -> 
     @perform 'speak', message: message, room_id: room_id, user_id: user_id 

$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) -> 
    if event.keyCode is 13 # return = send 
    App.room.speak event.target.value, $('#room_id').val(), $('#user_id').val() 
    event.target.value = "" 
    event.preventDefault() 

Answer 2

最も簡単な方法は、データの属性としてHTMLに値を渡すことになります。 jQueryを使ってCoffeeScriptから読み返してください。

messages divまたはフォームに追加できます。

<div id="messages" data-room-id="<%= params[:id] %>"> 

とJavaScriptで、とそれを読む：バニラJavaScriptでは

$('#messages').data('room-id') 

：

document.getElementById('messages').dataset.roomId