templator-examples.js

function tag( type, attrs ) {
  attrs = attrs || {};
  return function tagTemplate( content ) {
    return [
      startTag( type, attrs ),
      content,
      endTag( type )
    ].join(' ');
  }
}

function startTag( type, attrs ) {
  attrs = attrs || {};
  return [
    '<' + type,
    stringifyAttrs( attrs ) + '>'
  ].join(' ');
}

function endTag( type ) { return '</' + type + '>' }

function stringifyAttrs( attributes ) {
  attributes = attributes || {};
  return Object.keys( attributes )
    .map( function attributeString ( attr ) {
      return attr + '="' + attributes[ attr ] + '"';
    })
    .join(' ');
}

function compose ( fns ) {
  return function fn ( x ) {
    return fns.reduce( function ( res, f ) {
        return f( res );
    }, x)
  }
}


/* Templator usage example */

function render( employee ) {
  return employee.skills
    .map( compose([
      tag( 'span', { class: 'semi-bold' } ),
      tag( 'li', { class: 'skill-item' } )
    ])).join( '\n' );
}

function renderEmployeeList( employee ) {
  var skillList = employee.skills
    .map( tag( 'span', { class: 'semi-bold' } ) )
    .map( tag( 'li', { class: 'skill-item' } ) )
    .join( '\n' );
  return [
    tag( 'h1', { class: 'employee', id: employee.id } )( employee.name ),
    tag( 'ul', { class: 'skill-list' } )( skillList ),
    tag( 'p', { class: 'salary' } )( 'Salary is: ' + employee.salary )
  ].join( '\n' );
}

tag( 'div', { class: 'skills-container' } )(
  [
    tag( 'ul', { class: 'skills' } )(
      employee.skills
        .map( tag( 'span', { class: 'semi-bold' } ) )
        .map( tag( 'li', { class: 'skill-item' } ) )
        .join( '\n' )
    ),
    tag( 'p', { class: 'bold' } )(
      'Salary: ' + employee.salary
    )
  ].join( '\n' )
)

renderEmployeeList({
  id: 'RZT42',
  name: "Sandeep",
  skills: [ "Java", "Javascript", "Angular", "Spark", "Cassandra" ],
  experience: 2,
  salary: 100
});

good one