Implement a better template engine

[kyoshino]

FlareTail.js only has a simple fill method that renders Microdata (usually Schema.org). It would be nice to have support of if-else switches or for loops, so we can hide something (see bzdeck/bzdeck#281) or iterate over items.

Should we use template strings?

Also, the view should be automatically updated once the data has been changed. We need Object.observe because Object.watch and Proxy are bad for performance, but no one is working on the new method...

<section data-if="cf_user_story">
  <h4>User Story</h4>
  <div itemprop="cf_user_story"></div>
</section>
<!-- this should be right after an element having the `data-if` or `data-else-if` attribute -->
<section data-else>
  No user story??
</section>
<!-- this should also work -->
<section data-if-not="cf_user_story">
  No user story??
</section>

<ul data-for="mentor">
  <li itemprop="mentor" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name"></span> <span itemprop="email"></span>
  </li>
</ul>
<!-- or use a template -->
<ul data-for="mentor" data-template="bug-mentor"></ul>

[kyoshino]

It might be better to use comments instead of data-* attributes. NodeIterator allows us to iterate over comments like this, so <!-- if cf_user_story --> <!-- else --> <!-- endif --> can be found easily and the markup won't get messed up.

let iter = document.createNodeIterator(document.body, NodeFilter.SHOW_COMMENT); iter.nextNode()

See also IE's conditional comments

[kyoshino]

See also: XSLT elements, including if and for-each