Question

I have this code in a .html.erb file:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
  FB.Event.subscribe('edge.create',
      function(response) {
          send_fb_like();
      }
  );
  FB.Event.subscribe('edge.remove',
      function(response) {
          send_fb_unlike();
      }
  );
  function send_fb_like()
  {
    var business_name = '<%= @consumer.name %>';
    alert("You liked"+consumer_name);
  }
  function send_fb_unlike()
  {
    var business_name = '<%= @consumer.name %>';
    alert("You unliked"+consumer_name);
  }

</script>

This is working correctly, and I can access the @consumer.name correctly. However, if I change this to:

Where facebook_consumer.js looks like this:

$(function(){

FB.Event.subscribe('edge.create',
          function(response) {
              send_fb_like();
          }
      );
      FB.Event.subscribe('edge.remove',
          function(response) {
              send_fb_unlike();
          }
      );
      function send_fb_like()
      {
        var business_name = '<%= @consumer.name %>';
        alert("You liked"+consumer_name);
      }
      function send_fb_unlike()
      {
        var business_name = '<%= @consumer.name %>';
        alert("You unliked"+consumer_name);
      }


});

It will dump this:

You liked <%= @consumer.name %>. I have tried saving the file as js.erb, but then it seems it doesn’t know what @consumer is.

Any thoughts on what is the best approach?

Answer 1

Your best bet is probably to create an app-wide JS object to store values you need. At the top of the page, you can add elements to this object, and they will be available to your linked scripts.

<script type="text/javascript">
    app = app || {}
    app.keyName1 = "<%= @variable1 %>";
    app.keyName2 = "<%= @variable2 %>";
</script>