jquerysails.jsjquery-templatesjst

Using Client-side Templates in Sails.js

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?

Solution

  • 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.