Get started ➤

T5 is a micro-templating engine, allows you to fast render and filter complex data structures with no external dependencies. Since nowadays it is probably an "old school way" of doing templates like this, in some cases (like e.g. fast prototyping) it is nice to have something that is not require whole a lot of setup 😉

Installation

  bower install https://github.com/ludekarts/t5.git --save-dev

After installation include library into your HTML file like so:

  <script src="../path/to/T5.js" charset="utf-8" ></script> 

Markup

Any HTML tag can be turned into template just by adding to it data-t5 attribute containing its name. Any dynamic content will be displyed between double curly braces {{ }}.

  <p data-t5="playground"> {{ my dynamic content }}</p>

JS API

T5 have very simple API containing 3 methods nad one constant.

• version - current version of the library.
• template('templateString', 'name') - register template string and fetch inline templates containing data-t5 attribute.
• filter('filterName', filterFunction) - register filter method.
• render('templateName', dataForTemplate) - render selected template with provided data.

Chaining

You can chain all T5's API methods except render(). It is the only one that returns template string instead of T5 instance.

  t5.template()
    .template('<p>Hello {{ name }}</p>', 'hello')
    .template('<p>Goodbye {{ name }}</p>', 'goodbye')
    .filter('filterId2', (person) => person.id === 2)
    .render('list', data);

Templates ➤

In order to use any of the templates you need to register them first. You can do thin in two ways:

Register HTML

To register all templates within HTML code you just need to call method template() without any parameters. This will collect all HTML tags with data-t5 attribute and uses them as placeholders for render code.

  t5.template();

Register via JS

In some cases you'd want to have just template without placeholder. In that case you should register your template as template string throughtemplate() methods using it like below.

  t5.template('<span>{{ content }}</span>', 'templateName');

You need to remember though that because of registering template through JS you do not have HTML placeholder, that is why to display its content you need to use render() method output as an innerHTML of wraper you need to porvide.

  const wrapper = document.querySelector('#wrapper');
        wrapper.innerHTML = t5.render('templateName', data);

Render Template

To render template you need to use render() method. It takes two parameters.

• template name - it is name from data-t5 attribute or given templateName in JS resistration.
• data - data object to display. It is importan to remmember that T5 expect that data parameter is an object, so in case you would like to render only one value it need to be wrapped with object.

  <span data-t5="single">{{ single }}</span>

  ----------------------------------

  const single = 10;
  t5.render('single', {single});

Repeaters ➤

T5 allows to render nested repeated data structures with easy repeat syntax. Important is that each repeater need to have a wrapper element.

  const DC = {
    heroes : [
      {id: 1, name: 'Superman'},
      {id: 2, name: 'Batman'},
      {id: 3, name: 'Flash'}
    ]
  };

  ----------------------------------

  <ul data-t5="list">
    <li render="hero in DC.heroes">{{ hero.name }}</li>
  </ul>

  ----------------------------------

  <ul>
    <li>Superman</li>
    <li>Batman</li>
    <li>Flash</li>
  </ul>

Filters ➤

Each repeater can be supplied with additional filter method to display only identified elements from the list. To do this after specifying repeater add pipe | and then filterName. It is important that pipe is wepapped with spaces.

  const DC = {
    heroes : [
      {id: 1, name: 'Superman'},
      {id: 2, name: 'Batman'},
      {id: 3, name: 'Flash'}
    ]
  };

  ----------------------------------

  <ul data-t5="list">
    <li render="hero in DC.heroes | filterId2">{{ hero.name }}</li>
  </ul>

  ----------------------------------

  <ul>
    <li>Batman</li>
  </ul>

In oreder yo use filter you first need to create one first. To do this follow the example below. T5 filters works similar to array filters so they pass through only those elements that returns true from test condition.

  t5.filter('filterId2', (hero) => hero.id === 2);

See how easy it is to implement autocomplete with T5.

Interpolation ➤

Within templates you are allowed to perform simple interpolations which can be use for example to tests certain conditions. In order to perform interpolation you need to add # after double curly braces {{# interpolation }}

  <span data-t5="warning" class="label {{# (item.limit > 2) ? 'show' : 'hide' }}">Limit exceeded!</span>