Positives:
- lightweight (not much parsing)
- flexible (works with almost any JS), making plugins stupidly easy to write.
- ERB, so many IDEs support this syntax
Negatives:
- easy to make a syntax error
Magic Tags and special control magic tags (Handlebars)
{{#if showNavigation}}
<ul class="nav nav-list">
<li class="nav-header">Categories</li>
<li>
<a href="javascript://" data-category="all">All ({{contacts.count('all')}})</a>
</li>
{{#each categories}}
<li>
<a href="javascript://" data-category="{{data}}">
{{name}} ({{ contacts.count(data) }})
</a>
</li>
{{/each}}
</ul>
{{/if}}
Positives:
- simple, few control structures
Negatives
- helpers (like the number contacts for a given filter) will not work
- needs "computed" properties
Things a live-template should be able to do:
Magic Tag but JS performs control / looping blocks ( EJS/ ERB )
```
<% if( showNavigation ) { %>```
Positives: - lightweight (not much parsing) - flexible (works with almost any JS), making plugins stupidly easy to write. - ERB, so many IDEs support this syntax
Negatives: - easy to make a syntax error
Magic Tags and special control magic tags (Handlebars)
{{#if showNavigation}} <ul class="nav nav-list"> <li class="nav-header">Categories</li> <li> <a href="javascript://" data-category="all">All ({{contacts.count('all')}})</a> </li> {{#each categories}} <li> <a href="javascript://" data-category="{{data}}"> {{name}} ({{ contacts.count(data) }}) </a> </li> {{/each}} </ul> {{/if}}
Positives: - simple, few control structures Negatives - helpers (like the number contacts for a given filter) will not work - needs "computed" propertiesMore discussion here.
Pipes (alternative to ERB/EJS)
``` | if( showNavigation ) { |
| } | ```
Positives / Negatives - Same as EJS, but a little lighter feeling.
|
doesn't conflict with html's<
as much.CSS + Indent
if showNavigation ul.nav.nav-list li.nav-header Categories li a[href=javascript://][data-category=all] All ({{ contacts.count('all') }}) [categories category] li|li.widget()| a[href=javascript://][data-category={{ category.data }}] {{ category.name }} ({{ contacts.count('all') }})
Positives - very terse syntax - less likely to make mistakes?
Negatives - harder to parse, making template engine likely bigger - less flexible syntax
Valid HTML (basically knockout)
```
```
Positives - valid html
Negatives - likely bigger (because everything else is bigger than EJS that has live-binding) - less flexible syntax?
JAML Style
javascript if( showNavigation ){ ul( {className: "nav nav-list"}, li( {className: "nav-header"} ), li( a( { href: "javascript://", "data-category": "all"}, "(", span( contacts.count('all') ), ")" ) ), categories.map(function(category){ return li( function(el){ new widget(el) }, a({href: "javascript://", attr: category.data}, span( category.name ), "(",category.data,")" ) ) }) }) ) }
Positives - can probably be done very lightweight if it can be done w/o parsing - valid JS - easy on the eyes
Negatives - I'm not sure how to make this do live-binding without parsing.