Rails 3.2: How do I split large javascript file into many “partials”?

Question

Using the Rails Asset Pipeline, I was wondering how you can split a large javascript file into many different partials.

For example:

YUI().use('app', function(Y) {
    //*=require sub/file_a.js
    //*=require sub/file_b.js
    //*=require sub/file_c.js
    //*=require sub/file_d.js
});
// this obviously is not the answer & does not work.

This would just be for the developers benefit of having a cleaner looking JS File rather than a huge app full of YUI views & models.

I've already tried using ERB to include a file with no luck. Render is not available in the asset pipeline, so that is a bust as well.

Any ideas?

The end result would still be compiled by rake compile:assets:all -- so this would only be used in the development environment.

Answer 1

charlysisto had the right idea.

The answer was to use Sprockets & YUI Modules as the views / models.

//*=require_self
//*=require view/file_a.js
//*=require model/file_a.js
//*=require view/file_b.js
//*=require model/file_b.js
YUI().use('app','app-view-file-a','app-view-file-b','app-model-file-a','app-model-file-b', function(Y) {
    Y.FileApp = Y.Base.create('fileApp', Y.App, [], {
        views: {
            fileA: {type: 'FileAView'},
            fileB: {type: 'FileBView'}
        }
    }, {
        ATTRS: {
            root: {value: '/'}
        }
    });

    var app = new Y.FileApp({
        contentSelector: '#pjax-content',
        serverRouting: true,
        transitions: true,
        container: '#file-app',
        viewContainer: '#file-app-views'
    }).render().showContent('#pjax-content', {view: 'FileAView'});
});

In the views & model files, you would just create them as you would for a normal YUI3 Module:

YUI.add('app-view-file-a', function(Y) {
  Y.namespace('FileAView');
  FileAView = Y.Base.create('fileAView', Y.View, [], {
      template: Y.Handlebars.compile(Y.one('#file-a-template').getHTML())
  });
  Y.FileAView = FileAView;
},'0.1.0',{requires:['node','handlebars'], skinnable:false});

In the beginning, I actually got the File.read to work within the JS. But this method seemed very messy and didn't work very well in the development arena. Rails never knew to recompile the "parent" js file because the timestamp didn't change. If you are not using YUI, the File.read solution may work for you -- but I'd look for a different solution. Was pretty annoying have to enter a new line & delete every time I made a change to the child modules.

Answer 2

Depending on the content of your partials you could wrap the objects they continain in vars so you could then do :

//*=require sub/file_a.js
//*=require sub/file_b.js
//*=require sub/file_c.js
//*=require sub/file_d.js

YUI().use('app', function(Y) {file_a + file_b ...})

Not sure though it's a fit in your case, not knowing what's in the partials and what kind of argument YUI().use takes...