NANO - Template Engine

nano()

The nano() method replaces text like {user.lastname} with data from an JSON object like {user: {lastname: 'demo'}}.

Installation

  bower install js-nano-template

or

  npm install js-nano-template

or

  yarn add js-nano-template

Syntax

  nano(t, d[, u])

Parameters

t (string)
The template string in which the replacement should happen.

d (object)
The JSON object.

u (boolean)
Optional. Whether strings which can't be replaced should be shown.

Syntax

  nanoExternal(t, d[, u, e])

Parameters

t (string)
The template url in which the replacement should happen.

d (object)
The JSON object.

u (boolean)
Optional. Whether strings which can't be replaced should be shown.

e (object)
Optional. dom element, if a dom element is provided the replaced text will be loaded in that instead of returned.

Examples

Assuming you have following JSON response:

data = {
  user: {
    login: "demo",
    first_name: "Anon",
    "last name": "Ymous",
    account: {
      status: "active",
      expires_at: "2016-12-31"
    },
    greeting: function(){
      return 'Hello';
    }
  }
}

you can do:

  nano("<p>{user.greeting()} {user.first_name} {user.last name}! Your account is <strong>{user.account.status}</strong> {user.nonexistingnode}</p>", data)

and you get the following string:

  <p>Hello Anon Ymous! Your account is <strong>active</strong> </p>

or you can do:

  nano("<p>{user.greeting()} {user.first_name} {user.last name}! Your account is <strong>{user.account.status}</strong> {user.nonexistingnode}</p>", data, true)

and you get the following string:

  <p>Hello Anon Ymous! Your account is <strong>active</strong> {user.nonexistingnode}</p>

You can now also load an external template via nanoExternal('test.template.html', data, true); The parameters are the same except that the first parameter requires an url.

  nanoExternal('test.template.html', data, true)

or you pass the optional dom node and the replaced text will be directly loaded into that node.

  nanoExternal('test.template.html', data, true, document.getElementById('myId'))