Coffeescript bindings in Rails

Question

I am currently implementing a webrtc + pubnub lobby in my Rails 4 application using the sample app below: https://github.com/pubnub/webrtc-chat

I have successfully implemented all parts except for the bindings between the html and coffeescript.

In my chatroom.html.erb i have the following:

         <div class="box">
            <h3>Try Now</h3>
            <input type="text" id="userid" placeholder="Username" />
            <br />
            <a href="#" class="btn btn-large btn-inverse" id="login">Log In</a>
            <br />
            <p style="padding-top: 12px;">- or -</p>
            <span id="signinButton"></span>
         </div>


    <script type="text/html" id="user-item-template">
      <li class="user" data-user="<%= id %>">
      <span class="name"><%= name %></span>
      <a href="#" class="btn btn-success" data-user="<%= id %>">Call</a>
      </li>
    </script>

In my coffeescript I have the following:

  document.querySelector('#login').addEventListener 'click', (event) ->
    uuid = document.querySelector('#userid').value
    login "guest-#{uuid}"

  login = (name) ->
    uuid = name

 userTemplate = _.template $("#user-item-template").text()
 userList = $("#user-list")
  $(document).on 'pubnub:ready', (event) ->
    pubnub.subscribe
      channel: 'phonebook'
      callback: (message) ->
        # Do nothing
      presence: (data) ->
        # {
        # action: "join"/"leave"
        # timestamp: 12345
        # uuid: "Dan"
        # occupancy: 2
        # }
        if data.action is "join" and data.uuid isnt uuid
          newItem = userTemplate
            name: data.uuid.split('-')[1]
            id: data.uuid
          userList.append newItem
        else if data.action is "leave" and data.uuid isnt uuid
          item = userList.find "li[data-user=\"#{data.uuid}\"]"
          item.remove()

I get the following error:

Internal Server Error undefined local variable or method `id' for #<#:0x00000101ff1d40>

I am assuming that I am having complications due to the erb tags? They were defined already in the js app example. Is there a difference between rails erb tags and the tags found with javascript apps? I notice that the example is using only normal html. Maybe options like Angular.js could help but I would rather not delve into that.

EDIT: Added input form that takes in user id/name

is your coffeescript file named like the_script.js.coffee.erb? — koyz, Jun 30 '14 at 07:29
yes it is... @koyz Can coffeescript offer bindings with erb tags in rails? — Alistair Gillespie, Jun 30 '14 at 07:44
@RubyRacer I have (updated) added the coffeescript that assigns to ID i believe — Alistair Gillespie, Jun 30 '14 at 07:59
Ok, these are javascript variables, nor ruby variables... You must remove '<%= %>'. Are you using some client side technology? How will you achieve binding, by just providing the value? Anyhow, you should probably provide an expression, depending on client side framework. For example, in Angular.js it is {{id}} — Ruby Racer, Jun 30 '14 at 08:09
@RubyRacer Hmm, i will look into angular.js for the time being then — Alistair Gillespie, Jun 30 '14 at 08:18
Take a look at this too: http://stackoverflow.com/questions/15309910/jquery-twoway-data-binding — Ruby Racer, Jun 30 '14 at 08:27

Coffeescript bindings in Rails

0 Answers0