How can I include javascript assets selectively in SailsJS?

Question

How can I include javascript assets selectively in SailsJS?

In a Sails.js application, how can I include javascript assets selectively?

For instance, if I have an admin page and admin.js lives inside the assets/js directory. How do I keep the admin.js from loading on the public index page?

I'm aware that I could move the js out to the public directory, and include the script in my admin view's template. But I'm still unable to include it after the assets.js() call inserts it's javascript. I need it to be inserted after the sails.io.js script is loaded.

Is there any way to selectively load scripts and still have access to the sails.io.js which is automatically included with the assets.js() function call? Is there a better paradigm for this kind of situation?

EDIT:

Since the release of SailsJS 0.9 and the restructuring of the asset management system, this question doesn't really apply anymore.

javascript
node.js
express
sails.js

Answer 1

Sailsjs uses asset-rack to serve /assets. With the default layout page, sailsjs serves pages that look like (dummy2.js is included with an explicit < script >):

<html>
  <head>
    ...
    <script type="text/javascript" src="/assets/mixins/sails.io-d338eee765373b5d77fdd78f29d47900.js"></script>
    <script type="text/javascript" src="/assets/js/dummy0-1cdb8d87a92a2d5a02b910c6227b3ca4.js"></script>
    <script type="text/javascript" src="/assets/js/dummy1-8c1b254452f6908d682b9b149eb55d7e.js"></script>
  </head>
  <body>
    ...
    <script src="/public/dummy2.js"></script>
    ...
  </body>
</html>

So sailsjs does not concatenate files (at least not in development mode). sails.io (socket-io) is always included before /assets/js in layout, and before < script > on the page.

It looks like your admin.js is expecting a condition which sails.io has not yet set, perhaps its negotiating a transport with the server? Try waiting for the condition to be set.

Answer 2

In a Sails.js application, how can I include javascript assets selectively?

I selectively load js assets using a wrapper around assets.js(). This snippet uses Jade's "-" and "!{...}". EJS would instead use "<%...%>" and "<%=...%>"

<!-- JavaScript and stylesheets from your assets folder are included here -->
!{assets.css()}
-function selectAssets (assetsjs, files, ifInclude) {
-  return assetsjs.split('\n').reduce(function (prev, curr, i) {
-    var frag = curr.match(/src="\/assets\/js\/\w{1,}\-/);
-    if(frag) {
-      var file = frag[0].substring(16, frag[0].length - 1);
-      if ((files.indexOf(file) === -1) == ifInclude) { return prev; }
-   }
-   return prev + curr + '\n';
-  }, '');
-}
//!{assets.js()} this line is replaced by:
!{selectAssets(assets.js(), ['dummy1', 'dummy5', 'dummy6'], false)}

The above would not include /assets/js/dummy1.js, dummy5, dummy6 with the layout. If you wanted to include dummy1 and dummy5 on a particular page, you would place

!{selectAssets(assets.js(), ['dummy1', 'dummy5'], true)}

on that page.

Note: The code assumes file name don't contain "-". Its straighforward to generalize for css and templates. sails-io would be a special case for mixins.

Answer 3

Yes, you put a condition in template. :)

or add another "block" for your js.

extends ../layout

block body
    <h1>hello</h1>

block jsscripts
    <scripts> ..... </script>

Answer 4

To answer part of your question about where included files are located.

In 0.10 version order of the files is set in file tasks/values/injectedFiles.js as I recall in previous versions it was determined in Gruntfile.js itself.