Using Client-side Templates in Sails.js

Question

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?

Answer 1

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:

1. Prerequisites

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!

2. EJS 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.

3. Define _

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.

4. Rendering the template

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.

Answer 2

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.