DEMO

Comparison with Mustache

Tempreites

Crude string templating without any syntax, just semantic HTML.

Disclaimer: This is old, slow, buggy and not recommended. It's here just for historical reasons. It was my first public library and published on http://microjs.com/.

Usage

Get this as a string,

<div id="austrianeconomics">
  <h1 class="title"></h1>
  <ul id="theories">
    <li>
      <span class="author"></span>
      <span>
        <a class="theory"
           data-bind-here="href"
           data-bind-there="url">
        </a>
      </span>
    </li>
  </ul>
</div>

attach data to it,

var data = {
  title: 'Austrian economists and their theories',
  theories: [
    { author: 'Menger', theory: 'Subjective value', url: '/subj' },
    { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' },
    { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' },
  ]
}

tempreites.render(template, data)

get this back:

<div id="austrianeconomics">
  <h1 class="title"></h1>
  <ul id="theories">
    <li>
      <span class="author">Menger</span>
      <span>
        <a class="theory"
           data-bind-here="href"
           data-bind-there="url"
           href="/subj">
          Subjective value
        </a>
      </span>
    </li>
    <li>
      <span class="author">Hayek</span>
      <span>
        <a class="theory"
           data-bind-here="href"
           data-bind-there="url"
           href="/abct">
          Austrian Business Cycle Theory
        </a>
      </span>
    </li>
    <li>
      <span class="author">Kirzner</span>
      <span>
        <a class="theory"
           data-bind-here="href"
           data-bind-there="url"
           href="/entre">
          Sheer ignorance and entrepreneurship
        </a>
      </span>
    </li>
  </ul>
</div>

Features

• Semantic data binding - No need for <%=foo%> or {{foo}} assignments
• Collection rendering - No need for hand-written loops
• Valid HTML templates - Write templates as a part of the HTML, in plain HTML
• View logic in JavaScript - No crippled micro-template language, just plain JavaScript functions

TODOs:

• Basic optmization
• Read some data- attr to see in which element arrays of data will duplicate

Installation

npm install tempreites

Or download the file and include it anywhere.

Documentation

Considering a data object like this:

var data = {
  name: 'Miyamoto',
  link: '/miyamoto',
  completeName: {
    first: 'Shigeru'
    last: 'Miyamoto'
  },
  sons: [{ name: 'Mario', show: true }, { name: 'Luigi', show: false }]
  show: true
}
Tempreites.render(template, data)

Binding values

Use a class or an id at the target element with the value of the key in your data object.

<h1 class="name"></h1>

Nested objects

Use a class or an id at some element with the value of the parent key in your data object, then use a class or id with the child key anywhere inside the parent element.

<div id="name">
  <h1>
    <span class="last"></span>, <span class="first"></span></h1>
  </h1>
</div>

Nested lists

Use a class or an id at the element immediattely before the element you want to be repeated with the list values, then use a class or id with the child key anywhere inside it.

<div id="sons">
  <p class="name"></p>
</div>

Binding values to attributes

Use the data-bind attribute with the special syntax "javascriptObjectAttrName - > htmlElementAttrNameToBindTo". If you want to bind to more than one attr, write the other bindings at the same data-bind, separated by a |:

<header>
  <h1 id="name"></h1>
  <img data-bind="url -> src | name -> alt">
</header>

Conditional showing of elements

Use the data-show-if attr naming a key at the data object which will be tested for deciding if the element will be shown or not.

<div id="miyamoto" data-show-if="show">
  <ul class="sons">
    <li class="name" data-show-if="show"></li>
  </ul>
</div>

Pre-compiling templates

Call the compile function to get a pre-compiled template to which you can just pass the data later.

var tpr = Tempreites.compile('<div class="u"></div>')
tpr.render({u: 'a'})
tpr.render({u: 'b'})

Inspired by Plates and Transparency, but simplified and more useful.

Written with regular expressions, como se fazia antigamente lá na roça.