js-data-helper plugin

github address: http://github.com/CodeOfficer/js-data-helper/tree/master

 

What Is It?

It’s a Rails plugin that will help you pass data from Rails to Javascript.

Requirements

JS Data Helper requires either jQuery 1.2.3+, Prototype 1.6.1+ or Mootools 1.2+. Each of those Javascript frameworks has a data/store function built in.

How Does It work?

You use helpers in Rails to convert Ruby values to their Javascript equivalents. The values are collected and then output to your layout file just before the closing BODY tag. The output is actually inline Javascript, appropriate to the Javascript framework you are using. It will use the data storage methods of the Javascript framework you specify to insert data into DOM elements you have referenced by ID. This will occur inline and before dom.ready, so you know the data will be available when you need it.

But Why Not Just Use Custom DOM Attributes?

Sometimes we need to pass data to Javascript. We might decide to use custom attributes to hide data in our DOM elements but then we would run into a situation where our markup does not validate. We may also try to hide values in class attributes but then we’re be stepping on the toes of our designers. I am of the opinion that data meant for Javascript should remain in Javascript.

Helpers

helper param block notes

js_data_tag	“dom_id”	yes	Used anywhere, the string param represents the dom_id.
f.js_data	none	yes	Used inside of a FormBuilder, the dom_id param will be inferred through the Builder and refer to the ID of the Form.
js_data_functions	:framework	none	Used in your layout file just before the end BODY tag. This will output Javascript inline to insert data into your DOM . Framework is defined as a symbol and must be either :jquery, :prototype or :mootools.

Example

This demonstration for jQuery shows a variety of test values. I’m using HAML , but you could just as easily use ERB . In your view do something like:

- js_data_tag "test" do |d|
  - d.set :test_number, 2
  - d.set :test_float, 2.2
  - d.set :test_true, true
  - d.set :test_false, false
  - d.set :test_null_as_string, 'null'
  - d.set :test_nil, nil
  - d.set :test_NaN, 'NaN'
  - d.set :test_UPPERCASE, 'UPPERCASE'
  - d.set :test_string, 'some string'
  - d.set :test_quoted_function, "function(){ alert('true') }"
  - d.set :test_reverse_quoted_function, 'function(){ alert("true") }'

Then throw this in your layout , you can also specify :mootools or :prototype:

= js_data_functions :jquery

And you will see this in your DOM :

<script type='text/javascript'>
  $('#test').data('railsData', {
    test_NaN:NaN, 
    test_UPPERCASE:'UPPERCASE', 
    test_false:false, 
    test_float:2.2, 
    test_nil:null, 
    test_null_as_string:null, 
    test_number:2, 
    test_quoted_function:function(){ alert('true') }, 
    test_reverse_quoted_function:function(){ alert("true") }, 
    test_string:'some string', 
    test_true:true
  });
</script>

Now in your application.js (assuming you use Firefox/Firebug and have console.log) you can do:

$(function() {
  console.log($('#test').data('railsData'));
});

Though realistically, you might do something more like:

$(function() {
  $('.post').each(function(){
    var data = $(this).data('railsData');
    if (data){
      if (data.published){
        $(this).find('.title').css('font-weight', 'bold');
      } else {
        $(this).find('.title').css('color', 'red');
      };
    };
  });
});