I am new to Sails.js
I am trying to use the assets/templates feature in sails to render data client side but I cannot seem to find any working example.
I am looking for the native Sails solution, without angular or other frameworks. Just load .JST templates from assets/templates and populate them using jQuery
Can anyone reference a working example of using client-side templates in
sails.js?
The documentation is really lacking with this one. However, I managed to get the client-side templates working in Sails 0.12.4 with the following steps:
By default installation, you should already have a file views/homepage.ejs with a section for the templates:
...
<!--TEMPLATES-->
<!--TEMPLATES END-->
...
Now, by running $ sails lift, templates under assets/templates/ are compiled into a javascript file jst.js which is then automatically inserted into views/homepage.ejs between the template section comment tags. However, we first need a template!
Write a template file, say assets/templates/example.ejs:
<h1><%= message %></h1>
There is one problem. By default, Sails compiles only templates ending with *.html. This does not make sense because the template file is clearly not HTML and also because the server-side templates under views/ already have extension .ejs. To change that, replace the following lines in tasks/pipeline.js:
var templateFilesToInject = [
'templates/**/*.html'
];
with
var templateFilesToInject = [
'templates/**/*.ejs'
];
This enables our example.ejs to be compiled into the jst.js as a javascript function.
This is not enough. The compiled javascript in jst.js depends on Underscore or alternatively Lodash. Without _ in the client's namespace, executing the template function will throw an error.
To import this on the client-side, download your version of choice and place it under assets/js/dependencies/. For example the minified Lodash core seems to be sufficient. During next sails lift, a new script tag for the file will be automatically inserted into homepage.ejs, ultimately putting _ into the namespace.
Run $ sails lift and browse to the homepage at localhost:1337 by default. The jst.js has created the template function at window.JST['assets/templates/example.ejs'].
To test it in action, open the developer console, and type:
> window.JST['assets/templates/example.ejs']({message: 'Hello'})
This should return you the string <h1>Hello</h1>. This string you now want to insert somewhere into the document. Let us say you store it into a variable piece. You could use jQuery $('#target').html(piece) or good old document.getElementById('target').innerHTML = piece. Anyway, as the result, the rendered string is now inserted into the page under #target element.
Have you define ng-app and ng-view in the layout.ejs ? If you define then create a angular app.js in /assets with routing, then this will definitely work. If still any issue, please let me know.
