jsrender

JsRender is designed for both browser and server-side rendering. On Node.js, it includes all browser APIs plus additional Node-specific features. It provides built-in integration for:

• Express
• Hapi
• Browserify

These integrations allow you to register templates as simple .html files on the file system and render them either server-side, client-side, or both.

JsRender adapts its namespace based on the presence of jQuery:

With jQuery

If jQuery is present, JsRender loads as a jQuery plugin and adds $.views, $.templates, and $.render to the jQuery namespace ($ or window.jQuery).

Without jQuery

If jQuery is not present, JsRender provides its own global namespace object: jsrender (or window.jsrender). To use the same API patterns as the jQuery version, you can alias the namespace:

var $ = window.jsrender;

// Now use $.views, $.templates, $.render, etc.

Note: If jQuery is not loaded, passing a jQuery selector to $.templates() will only work for the ID selector.

JsRender can be installed via several methods depending on your environment:

• Bower: $ bower install jsrender
• CDN: Available via jsdelivr or cdnjs.
• Node.js (npm): Use npm for server-side rendering or module bundling.
• AMD: Can be loaded using AMD script loaders like RequireJS.
• Bundlers: Supports Browserify and webpack via Node.js integration.

You can define templates in several ways:

1. From a string: Pass the template string directly to $.templates().
2. From a script block: Declare markup in an HTML <script> tag with type="text/x-jsrender" and pass a jQuery selector to $.templates().
3. On Node.js: Import the jsrender namespace and pass a file path to $.templates().

{{if}} tag

Used for conditional rendering. The block is rendered if the expression evaluates to truthy. {{if expression}} ... {{else}} ... {{/if}}

{{for}} tag

Used for iterating over arrays or ranges.

• Array iteration: {{for item in items}} ... {{/for}}
• Range iteration: {{for start=0 end=10 step=2}} ... {{/for}}
• Filtering/Sorting: Supports filter, sort, reverse, start, end, and step via properties.

Example of a filtered and sorted loop: {{for items: {filter: myFilter, sort: 'name', reverse: true}}} ... {{/for}}

The tmplify module is a Browserify transform designed to compile JsRender template files into reusable JavaScript modules. It automatically detects template files based on their extensions, handles nested template references (e.g., {{include tmpl="..."}}), and bundles them so they can be required in your application.

By default, it recognizes files with .html, .jsrender, or .jsr extensions. You can customize these via the extensions or e option.

Use tmpl.render(data) or the shortcut tmpl(data) to render a template.

• If data is an object, the template renders once using that object as the context.
• If data is an array, the template renders once for each item in the array and concatenates the results.

var tmpl = $.templates(" Name: {{:name}}<br/> ");
var person = {name: "Jim"};

// Render for an object
var html = tmpl.render(person);
// result: "Name: Jim<br/> "

// Render for an array
var people = [{name: "Jim"}, {name: "Pedro"}];
var htmlArray = tmpl.render(people);
// result: "Name: Jim<br/> Name: Pedro<br/> "

Helpers are functions or values accessible within templates using the ~helperName syntax. You can pass helpers during rendering or register them globally.

• Local helpers: Pass an object as the second argument to render(data, helpers).
• Global helpers: Register them using $.views.helpers(helpersObject).

var myHelpers = {
  upper: function(val) { return val.toUpperCase(); },
  title: "Sir"
};

// Access via ~ syntax
var tmpl = $.templates("{{:~title}} {{:first}} {{:~upper(last)}}");

// Pass during render
var data = {first: "Jim", last: "Varsov"};
var html = tmpl.render(data, myHelpers);
// result: "Sir Jim VARSOV"

// OR register globally
$.views.helpers(myHelpers);
var htmlGlobal = tmpl.render(data);

Converters allow you to transform values directly within a tag using the {{converterName: pathOrExpr}} syntax. Register them using $.views.converters(name, function).

$.views.converters("upper", function(val) { return val.toUpperCase(); });

var tmpl = $.templates("{{:first}} {{upper:last}}");
var data = {first: "Jim", last: "Varsov"};
var html = tmpl.render(data);
// result: "Jim VARSOV"

You can register a template with a specific name using $.templates(name, template). Once registered, you can render it using $.templates.name(data) or $.render.name(data).

// Register named template "myTmpl1"
$.templates("myTmpl1", "Name: {{:name}}<br/> ");

var person = {name: "Jim"};

// Render named template
var html = $.templates.myTmpl1(person);
// Alternative: var html = $.render.myTmpl1(person);

You can define custom tags using $.views.tags(name, definition). The definition can be a function or a template string.

// As a render function
$.views.tags("fullName", function(val) {
  return val.first + " " + val.last;
});

// OR as a template string
$.views.tags("fullName", "{{:first}} {{:last}}");

// Usage
var tmpl = $.templates("{{fullName person/}}");
var data = {person: {first: "Jim", last: "Varsov"}};
var html = tmpl.render(data);
// result: "Jim Varsov"