1-handlebars-cheatsheet.hbs

Handlebars es un sistema de plantillas web semantico iniciado por Yehuda Katz en el 2010.
Handlebars.js es una extensión de Mustache, y además de renderear plantillas propias de Handlebars, 
puede renderear plantillas Mustache.
More: http://handlebarsjs.com/
      http://mustache.github.io/mustache.5.html

1. Expresiones.

1.1 Uso básico.


{{mustache}}                                   : Expresión de Handlebars (variable in the current context)
{{article.title}}                              : Las expresiones de Handlebars puede además ser separadas por punto para acceder a propiedad del objeto.
{{{foo}}}                                      : Para evitar que Handlebars escape un valor.

articles.[10].[#comments]                      : La plantilla tratará roughly equivalent to this javascript: articles[10]['#comments']

{{! Este comentario no aparecerá en la salida }}  : Cualquier comentario que contenga }} o otros handlebars tokens deben usar la sintaxis {{!-- --}}.
<!-- Este comentario aparecerá en la salida -->    : Este comentario estará en la salida.


1.2 Helpers.


{{{link story}}}                               : `link` es el nombre de un Handlebars helper, y story es un parámetro a ese helper
{{{link '...' story.url}}}                     : You can also pass a simple String as a parameter to Handlebars helpers.
{{{link "..." href=story.url class="story"}}}  : Handlebars helpers can also receive an optional sequence of key-value pairs as their final parameter


1.3. Subexpressions.


{{outer-helper (inner-helper 'abc') 'def'}}    : Handlebars offers support for subexpressions, which allows you to invoke multiple helpers


2. Block Expressions.


{{#noop}}{{body}}{{/noop}}                     : Basic block, The noop helper will receive an options hash. This options hash contains a function (options.fn) that behaves like a normal compiled Handlebars template. 

{{#with story}}
  <div class="intro">{{{intro}}}</div>
  <div class="body">{{{body}}}</div>
{{/with}}


Note 1: When looping through items in each, you can optionally reference the current loop index via {{@index}}.
Note 2: Additionally for object iteration, {{@key}} references the current key name.
Note 3: The first and last steps of iteration are noted via the @first and @last variables then iterating over an array.
Note 4: When iterating over an object only the @first is available.

{{#each comments}}
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  <div>{{body}}</div>
{{/each}}


{{#if isActive}}
  <img src="star.gif" alt="Active">
{{else}}
  <img src="cry.gif" alt="Inactive">
{{/if}}

{{#unless license}}
  <h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}


Note 1: The log helper allows for logging of context state while executing a template.
Note 2: Delegates to Handlebars.logger.log which may be overriden to perform custom logging.

{{log "Look at me!"}}


3. Built-In Utilities.


Handlebars.Utils.escapeExpression(string) : HTML escapes the passed string, making it safe for rendering as text within HTML content.
Handlebars.Utils.isEmpty(value)           : Determines if a given value is empty.
Handlebars.Utils.extend(obj, value)       : Simple utility method to augment obj with all keys defined on value.
Handlebars.Utils.toString(obj)            : Generic toString method.
Handlebars.Utils.isArray(obj)             : Determines if an obj is an array.
Handlebars.Utils.isFunction(obj)          : Determines if an obj is a function.

2-handlebars-cheatsheet.js

// 1. Define a helper.
// http://handlebarsjs.com/expressions.html#helpers


// also note: Helpers receive the current context as the this context of the function.
Handlebars.registerHelper('link', function(object) {
  return new Handlebars.SafeString(
    "<a href='" + object.url + "'>" + object.text + "</a>"
  );
});

Handlebars.registerHelper('link', function(text, options) {
  var attrs = [];
  for(var prop in options.hash) {
    attrs.push(prop + '="' + options.hash[prop] + '"');
  }
  return new Handlebars.SafeString(
    "<a " + attrs.join(" ") + ">" + text + "</a>"
  );
});


// 2. Compilation and Execution.
// You can deliver a template to the browser by including it in a <script> tag.
// <script id="entry-template" type="text/x-handlebars-template">
//   template content
// </script>


// check also precompilation: http://handlebarsjs.com/precompilation.html
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

// execution: http://handlebarsjs.com/execution.html
var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);


// 3. Block Expressions.
// http://handlebarsjs.com/#block-expressions


// {{#list people}}{{firstName}} {{lastName}}{{/list}}

templateContext = {
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";
  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }
  return out + "</ul>";
});

Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});