CodePen

HTML

            
              
            
          
!
via HTML Inspector

CSS

            
              body
  background: black
  color: #999
  padding: 2em
  font: bold 1em/2em sans-serif
table
  &, td, th
    border: 1px solid red

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              # intiialize new engine
handlebars = new MiniHandlebars
  locals:
    santa_laugh: 'Ho, ho, ho!'
    # note that you define all your own blocks;
    # they are just functions that take any number of arguments
    # but the first two arguments are always the same and required.
    each: (template, data, enumerable, key, value) ->
      out = ''
      for k of data[enumerable]
        unless {}.hasOwnProperty data[enumerable], k # optional
          _data = MiniHandlebars._extend data[enumerable][k] # optional
          _data['this'] = _data['this'] || data[enumerable][k] # optional
          typeof key is 'undefined' or _data[key] = k # optional
          typeof value is 'undefined' or _data[value] = data[enumerable][k] # optional, you know what you need!
          out += handlebars.render template, _data
      out

# note that blocks and variables are written
# the same; without the additional pound (#).
# also, this is how i cache the templates in js.
handlebars.templates['test'] = '<!doctype html><html><head></head><body><p>Hello, {{name}}!</p><p>Here are your Christmas lists ({{santa_laugh}}):</p><table><thead><tr>{{each children, name}}<th>{{name}}</th>{{/each}}</tr></thead><tbody><tr>{{each children, name}}<td>{{each list}}<ul><li>{{this}}</li></ul>{{/each}}</td>{{/each}}</tr></tbody></table></body></html>'

# this will compile html output.
# there is no in-between-js-function render stage, and there may never be
# both-stages-in-one are already faster than the original lib
# and i found the time acceptable for my purposes.
jQuery ->
        
  out = handlebars.render handlebars.templates['test'],
    name: 'Mike and Elise Smullin (Santa)'
    children:
      Landon:
        list: ['ninja turtles mask', 'mario kart legos', 'airplane']
      Bella:
        list: ['something sweet']
        
  jQuery('body').append out
  console.log out
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................