javascript - not - handlebars if equals

Operador lógico en un handlebars.js{{#if}} condicional

Question

¿Hay una forma en el manillar JS para incorporar operadores lógicos en el operador condicional manillar estándar? Algo como esto:

{{#if section1 || section2}}
.. content
{{/if}}

Sé que podría escribir mi propio ayudante, pero primero me gustaría asegurarme de que no estoy reinventando la rueda.

Answer 1

Acabo de llegar a esta publicación de una búsqueda en google sobre cómo verificar si una cadena es igual a otra cadena.

Utilizo HandlebarsJS en el lado del servidor NodeJS, pero también uso los mismos archivos de plantilla en el front-end usando la versión del navegador de HandlebarsJS para analizarlos. Esto significaba que si quería un ayudante personalizado, tendría que definirlo en 2 lugares separados o asignar una función al objeto en cuestión: ¡demasiado esfuerzo!

Lo que la gente olvida es que ciertos objetos tienen funciones heredadas que se pueden usar en la plantilla del bigote. En el caso de una cadena:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.

Podemos usar este método para devolver una serie de coincidencias, o null si no se encontraron coincidencias. Esto es perfecto, porque mirando la documentación de HandlebarsJS http://handlebarsjs.com/builtin_helpers.html

You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.

Asi que...

{{#if your_string.match "what_youre_looking_for"}} 
String found :)
{{else}}
No match found :(
{{/if}}

ACTUALIZAR:

Después de probar en todos los navegadores, esto no funciona en Firefox . HandlebarsJS pasa otros argumentos a una llamada de función, lo que significa que cuando se llama a String.prototype.match, el segundo argumento (es decir, los indicadores Regexp para la llamada de función de coincidencia según la documentación anterior) parece que se está pasando. Firefox ve esto como un uso obsoleto de String.prototype.match, y así se rompe.

Una solución es declarar un nuevo prototipo funcional para el objeto String JS , y usarlo en su lugar:

if(typeof String.includes !== ''function'') {
    String.prototype.includes = function(str) {
        if(!(str instanceof RegExp))
            str = new RegExp((str+'''').escapeRegExp(),''g'');
        return str.test(this);
    }
}

Asegúrese de que este código JS esté incluido antes de ejecutar su función Handlebars.compile (), luego en su plantilla ...

{{#your_string}}
    {{#if (includes "what_youre_looking_for")}} 
        String found :)
    {{else}}
        No match found :(
    {{/if}}
{{/your_string}}

Answer 2

Aquí hay un enlace al ayudante de bloque que uso: comparador del ayudante de bloque . Es compatible con todos los operadores estándar y le permite escribir código como se muestra a continuación. Es realmente muy útil.

{{#compare Database.Tables.Count ">" 5}}
There are more than 5 tables
{{/compare}}

Answer 3

Aquí hay una solución si desea verificar múltiples condiciones:

/* Handler to check multiple conditions
   */
  Handlebars.registerHelper(''checkIf'', function (v1,o1,v2,mainOperator,v3,o2,v4,options) {
      var operators = {
           ''=='': function(a, b){ return a==b},
           ''==='': function(a, b){ return a===b},
           ''!='': function(a, b){ return a!=b},
           ''!=='': function(a, b){ return a!==b},
           ''<'': function(a, b){ return a<b},
           ''<='': function(a, b){ return a<=b},
           ''>'': function(a, b){ return a>b},
           ''>='': function(a, b){ return a>=b},
           ''&&'': function(a, b){ return a&&b},
           ''||'': function(a, b){ return a||b},
        }
      var a1 = operators[o1](v1,v2);
      var a2 = operators[o2](v3,v4);
      var isTrue = operators[mainOperator](a1, a2);
      return isTrue ? options.fn(this) : options.inverse(this);
  });

Uso:

/* if(list.length>0 && public){}*/

{{#checkIf list.length ''>'' 0 ''&&'' public ''=='' true}} <p>condition satisfied</p>{{/checkIf}}

Answer 4

Aquí tenemos manillares de vainilla para múltiples && lógicos y || (y o):

Handlebars.registerHelper("and",function() {
    var args = Array.prototype.slice.call(arguments);
    var options = args[args.length-1];

    for(var i=0; i<args.length-1; i++){
        if( !args[i] ){
            return options.inverse(this);
        }
    }

    return options.fn(this);
});


Handlebars.registerHelper("or",function() {
    var args = Array.prototype.slice.call(arguments);
    var options = args[args.length-1];

    for(var i=0; i<args.length-1; i++){
        if( args[i] ){
            return options.fn(this);
        }
    }

    return options.inverse(this);
}

// Results
// {{#and foo bar sally bob}} yup {{else}} nope {{/and}} // yup
// {{#or foo bar "" sally bob}} yup {{else}} nope {{/or}} // yup

// {{#and foo bar "" sally bob}} yup {{else}} nope {{/and}} // nope
// {{#or "" "" "" "" ""}} yup {{else}} nope {{/or}} // nope

¿No estoy seguro si es "seguro" usar "y" y "o" ... tal vez cambiar a algo como "op_and" y "op_or"?

Answer 5

Desafortunadamente, ninguna de estas soluciones resuelve el problema del operador "OR" "cond1 || cond2".

1. Compruebe si el primer valor es verdadero

2. Use "^" (o) y verifique si cond2 es verdadero

   {{#if cond1}} HAGA LA ACCIÓN {{^}} {{#if cond2}} HAGA LA ACCIÓN {{/ if}} {{/ if}}

Se rompe la regla DRY. Entonces, ¿por qué no usar parcial para hacerlo menos desordenado?

{{#if cond1}}
    {{> subTemplate}}
{{^}}
    {{#if cond2}}
        {{> subTemplate}}
    {{/if}}
{{/if}}

Answer 6

En Ember.js puede usar inline if helper en if block helper. Puede reemplazar || Operador lógico, por ejemplo:

{{#if (if firstCondition firstCondition secondCondition)}}
  (firstCondition || (or) secondCondition) === true
{{/if}}

Answer 7

Este es un enfoque que estoy usando para el 1 de noviembre y el 2.0 de noviembre.

// app/helpers/js-x.js
export default Ember.HTMLBars.makeBoundHelper(function (params) {
  var paramNames = params.slice(1).map(function(val, idx) { return "p" + idx; });
  var func = Function.apply(this, paramNames.concat("return " + params[0] + ";"))
  return func.apply(params[1] === undefined ? this : params[1], params.slice(1));
});

Entonces puedes usarlo en tus plantillas así:

// used as sub-expression
{{#each item in model}}
  {{#if (js-x "this.section1 || this.section2" item)}}
  {{/if}}
{{/each}}

// used normally
{{js-x "p0 || p1" model.name model.offer.name}}

Donde los argumentos de la expresión se pasan como p0 , p1 , p2 , etc. y p0 también se pueden referenciar como this .

Answer 8

Esto es posible ''engañando'' con un ayudante de bloque. Esto probablemente va en contra de la ideología de las personas que desarrollaron manillares.

Handlebars.registerHelper(''ifCond'', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

A continuación, puede llamar al ayudante en la plantilla de esta manera

{{#ifCond v1 v2}}
    {{v1}} is equal to {{v2}}
{{else}}
    {{v1}} is not equal to {{v2}}
{{/ifCond}}

Answer 9

Hay una forma simple de hacer esto sin escribir una función auxiliar ... Puede hacerse completamente dentro de la plantilla.

{{#if cond1}}   
  {{#if con2}}   
    <div> and condition completed</div>  
  {{/if}}
{{else}}   
  <div> both conditions weren''t true</div>  
{{/if}}

Edición: A la inversa, puedes hacer o haciendo esto:

{{#if cond1}}  
  <div> or condition completed</div>    
{{else}}   
  {{#if cond2}}  
    <div> or condition completed</div>  
  {{else}}      
    <div> neither of the conditions were true</div>    
  {{/if}}  
{{/if}}

Editar / Nota: Desde el sitio web del manillar: handlebarsjs.com aquí están los valores falsos:

Puede usar el ayudante if para renderizar condicionalmente un bloque. Si su argumento devuelve falso, indefinido, nulo, "" o [] (un valor "falso"), entonces cualquier ''cond'' (como cond1 o cond2) no se considerará verdadero.

Answer 10

He encontrado un paquete npm hecho con CoffeeScript que tiene muchos ayudantes increíblemente útiles para Handlebars. Eche un vistazo a la documentación en la siguiente URL:

https://npmjs.org/package/handlebars-helpers

Puede hacer un wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz para descargarlos y ver el contenido del paquete.

Podrás hacer cosas como {{#is number 5}} o {{formatDate date "%m/%d/%Y"}}

Answer 11

Instale el complemento github.com/jmurphyau/ember-truth-helpers ejecutando el siguiente comando

ember instalar ember-truth-helpers

puede comenzar a utilizar la mayoría de los operadores lógicos (eq, not-eq, not, y, o, gt, gte, lt, lte, xor).

{{#if (or section1 section2)}}  
...content  
{{/if}}

Incluso puede incluir subexpresión para ir más lejos,

{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}  
...content  
{{/if}}

Answer 12

Llevando la solución un paso más allá. Esto añade el operador de comparación.

Handlebars.registerHelper(''ifCond'', function (v1, operator, v2, options) {

    switch (operator) {
        case ''=='':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
        case ''==='':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
        case ''!='':
            return (v1 != v2) ? options.fn(this) : options.inverse(this);
        case ''!=='':
            return (v1 !== v2) ? options.fn(this) : options.inverse(this);
        case ''<'':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
        case ''<='':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
        case ''>'':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
        case ''>='':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
        case ''&&'':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
        case ''||'':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

Úsalo en una plantilla como esta:

{{#ifCond var1 ''=='' var2}}

Versión de Coffee Script

Handlebars.registerHelper ''ifCond'', (v1, operator, v2, options) ->
    switch operator
        when ''=='', ''==='', ''is''
            return if v1 is v2 then options.fn this else options.inverse this
        when ''!='', ''!==''
            return if v1 != v2 then options.fn this else options.inverse this
        when ''<''
            return if v1 < v2 then options.fn this else options.inverse this
        when ''<=''
            return if v1 <= v2 then options.fn this else options.inverse this
        when ''>''
            return if v1 > v2 then options.fn this else options.inverse this
        when ''>=''
            return if v1 >= v2 then options.fn this else options.inverse this
        when ''&&'', ''and''
            return if v1 and v2 then options.fn this else options.inverse this
        when ''||'', ''or''
            return if v1 or v2 then options.fn this else options.inverse this
        else
            return options.inverse this

Answer 13

Manillares soporta operaciones anidadas. Esto proporciona mucha flexibilidad (y código más limpio) si escribimos nuestra lógica de manera un poco diferente.

{{#if (or section1 section2)}}
.. content
{{/if}}

De hecho, podemos agregar todo tipo de lógica:

{{#if (or 
        (eq section1 "foo")
        (ne section2 "bar"))}}
.. content
{{/if}}

Solo registre estos ayudantes:

Handlebars.registerHelper({
    eq: function (v1, v2) {
        return v1 === v2;
    },
    ne: function (v1, v2) {
        return v1 !== v2;
    },
    lt: function (v1, v2) {
        return v1 < v2;
    },
    gt: function (v1, v2) {
        return v1 > v2;
    },
    lte: function (v1, v2) {
        return v1 <= v2;
    },
    gte: function (v1, v2) {
        return v1 >= v2;
    },
    and: function () {
        return Array.prototype.slice.call(arguments).every(Boolean);
    },
    or: function () {
        return Array.prototype.slice.call(arguments, 0, -1).some(Boolean);
    }
});

Answer 14

Otra alternativa es usar el nombre de la función en #if . El #if detectará si el parámetro es función y si lo es, entonces lo llamará y usará su retorno para la verificación de la veracidad. A continuación, myFunction obtiene el contexto actual como this .

{{#if myFunction}}
  I''m Happy!
{{/if}}

Answer 15

Otra solución torcida para un ayudante ternario:

''?:'' ( condition, first, second ) {
  return condition ? first : second;
}

<span>{{?: fooExists ''found it'' ''nope, sorry''}}</span>

O un simple ayudante de unión:

''??'' ( first, second ) {
  return first ? first : second;
}

<span>{{?? foo bar}}</span>

Ya que estos caracteres no tienen un significado especial en el marcado de manillares, puedes usarlos para los nombres de ayudantes.

Answer 16

Para aquellos que tienen problemas al comparar las propiedades de los objetos, dentro del ayudante agregue esta solución

El ayudante de Ember.js no reconoce correctamente un parámetro

Answer 17

Puede hacerlo simplemente utilizando el operador lógico como se muestra a continuación:

{{#if (or(eq firstValue ''String_to_compare_value'') (eq secondValue ''String_to_compare_value''))}}business logic goes here{{/if}}

{{#if (and(eq firstValue ''String_to_compare_value'') (eq secondValue ''String_to_compare_value''))}}business logic goes here{{/if}}

Antes de cerrar si puedes escribir tu lógica de negocio.

Answer 18

Puedo entender por qué querría crear un ayudante para situaciones en las que tenga un gran número de comparaciones variadas para realizar dentro de su plantilla, pero para un número relativamente pequeño de comparaciones (o incluso una, que fue lo que me llevó a esta página en en primer lugar), probablemente sería más fácil definir una nueva variable de manillares en su llamada a la función de representación de vistas, como:

Pase al manillar en render:

var context= {
    ''section1'' : section1,
    ''section2'' : section2,
    ''section1or2'' : (section1)||(section2)
};

y luego dentro de su plantilla de manillares:

{{#if section1or2}}
    .. content
{{/if}}

Menciono esto por simplicidad, y también porque es una respuesta que puede ser rápida y útil a la vez que sigue cumpliendo con la naturaleza sin lógica de Handlebars.

Answer 19

Si solo quiere comprobar si uno u otro elemento están presentes, puede utilizar este asistente personalizado.

Handlebars.registerHelper(''if_or'', function(elem1, elem2, options) {
  if (Handlebars.Utils.isEmpty(elem1) && Handlebars.Utils.isEmpty(elem2)) {
    return options.inverse(this);
  } else {
    return options.fn(this);
  }
});

Me gusta esto

{{#if_or elem1 elem2}}
  {{elem1}} or {{elem2}} are present
{{else}}
  not present
{{/if_or}}

Si también necesita poder tener un "o" para comparar los valores de retorno de la función , preferiría agregar otra propiedad que devuelva el resultado deseado.

¡Las plantillas deberían ser sin lógica después de todo!

Answer 20

Siguiendo estas 2 guías a-way-to-let-users-define-custom-made-bound-if-statements y ayudantes personalizados enlazados , pude ajustar mis vistas compartidas en esta publicación en para usar esto en lugar del # estándar si declaración. Esto debería ser más seguro que simplemente lanzar un #if allí.

Los ayudantes personalizados en esa esencia son sobresalientes.

<li>
    <a href="{{unbound view.varProductSocialBlog}}">
        {{#if-equal view.showDiv "true"}}<div>{{/if-equal}}<i class="fa fa-rss-square"></i>{{#if-equal view.showDiv "true"}}</div>{{/if-equal}}
        {{#if-equal view.showTitle "true"}}Blog{{/if-equal}}
    </a>
</li>

Estoy usando el proyecto a-way-to-let-users-define-custom-made-bound-if-statements para compilar mi aplicación.

Configuración actual en el momento de esta publicación:

DEBUG: -------------------------------
DEBUG: Ember      : 1.5.1
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 2.1.1
DEBUG: -------------------------------

Answer 21

Similar a la respuesta de Jim, pero con un poco de creatividad, también podríamos hacer algo como esto:

Handlebars.registerHelper( "compare", function( v1, op, v2, options ) {

  var c = {
    "eq": function( v1, v2 ) {
      return v1 == v2;
    },
    "neq": function( v1, v2 ) {
      return v1 != v2;
    },
    ...
  }

  if( Object.prototype.hasOwnProperty.call( c, op ) ) {
    return c[ op ].call( this, v1, v2 ) ? options.fn( this ) : options.inverse( this );
  }
  return options.inverse( this );
} );

Entonces para usarlo obtenemos algo como:

{{#compare numberone "eq" numbretwo}}
  do something
{{else}}
  do something else
{{/compare}}

Yo sugeriría que el objeto salga de la función para un mejor rendimiento, pero de lo contrario puede agregar cualquier función de comparación que desee, incluyendo "y" y "o".

Answer 22

Solución correcta para Y / O

Handlebars.registerHelper(''and'', function () {
    // Get function args and remove last one (function name)
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});
Handlebars.registerHelper(''or'', function () {
    // Get function args and remove last one (function name)
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
}); 

Entonces llama como sigue

{{#if (or (eq questionType ''STARTTIME'') (eq questionType ''ENDTIME'') (..) ) }}

Por cierto: tenga en cuenta que la solución dada aquí es incorrecta, no está restando el último argumento que es el nombre de la función. https://.com/a/31632215/1005607

Su original AND / OR se basó en la lista completa de argumentos

   and: function () {
        return Array.prototype.slice.call(arguments).every(Boolean);
    },
    or: function () {
        return Array.prototype.slice.call(arguments).some(Boolean);
    }

¿Puede alguien cambiar esa respuesta? Acabo de perder una hora tratando de arreglar algo en una respuesta recomendada por 86 personas. La solución es filtrar el último argumento que es el nombre de la función. Array.prototype.slice.call(arguments, 0, arguments.length - 1)

Answer 23

Solución mejorada que básicamente funciona con cualquier operador binario (al menos números, cadenas no funcionan bien con eval, TENGA CUIDADO DE UNA POSIBLE INYECCIÓN DE ESCRITOR SI UTILIZA UN OPERADOR NO DEFINIDO CON ENTRADAS DEL USUARIO):

Handlebars.registerHelper("ifCond",function(v1,operator,v2,options) {
    switch (operator)
    {
        case "==":
            return (v1==v2)?options.fn(this):options.inverse(this);

        case "!=":
            return (v1!=v2)?options.fn(this):options.inverse(this);

        case "===":
            return (v1===v2)?options.fn(this):options.inverse(this);

        case "!==":
            return (v1!==v2)?options.fn(this):options.inverse(this);

        case "&&":
            return (v1&&v2)?options.fn(this):options.inverse(this);

        case "||":
            return (v1||v2)?options.fn(this):options.inverse(this);

        case "<":
            return (v1<v2)?options.fn(this):options.inverse(this);

        case "<=":
            return (v1<=v2)?options.fn(this):options.inverse(this);

        case ">":
            return (v1>v2)?options.fn(this):options.inverse(this);

        case ">=":
         return (v1>=v2)?options.fn(this):options.inverse(this);

        default:
            return eval(""+v1+operator+v2)?options.fn(this):options.inverse(this);
    }
});

Answer 24

Un problema con todas las respuestas publicadas aquí es que no funcionan con propiedades vinculadas, es decir, la condición if no se vuelve a evaluar cuando cambian las propiedades involucradas. Aquí hay una versión un poco más avanzada del asistente que soporta enlaces. Utiliza la función de bind de la fuente Ember, que también se usa para implementar el ayudante Ember #if normal.

Esta está limitada a una propiedad unida en el lado izquierdo, en comparación con una constante en el lado derecho, que creo que es lo suficientemente bueno para los propósitos más prácticos. Si necesita algo más avanzado que una comparación simple, entonces quizás sería bueno comenzar a declarar algunas propiedades computadas y usar el ayudante normal #if lugar.

Ember.Handlebars.registerHelper(''ifeq'', function(a, b, options) {
  return Ember.Handlebars.bind.call(options.contexts[0], a, options, true, function(result) {
    return result === b;
  });
});

Puedes usarlo así:

{{#ifeq obj.some.property "something"}}
  They are equal!
{{/ifeq}}

Answer 25

tomando esto en una muesca, para aquellos de ustedes que viven en el borde.

gist : https://gist.github.com/akhoury/9118682 Demo : Fragmento de código a continuación

Ayudante de manillares: {{#xif EXPRESSION}} {{else}} {{/xif}}

un ayudante para ejecutar una sentencia IF con cualquier expresión

1. La expresión es una cadena que se ha escapado correctamente.
2. Sí, NECESITA escapar correctamente de los literales de cadena o simplemente alternar entre comillas simples y dobles
3. puede acceder a cualquier función o propiedad global, por ejemplo, encodeURIComponent(property)
4. este ejemplo asume que pasaste este contexto a tu template( {name: ''Sam'', age: ''20'' } ) manillares template( {name: ''Sam'', age: ''20'' } ) , la age aviso es una string , solo para que pueda parseInt() más adelante en esta publicación

Uso:

<p>
 {{#xif " name == ''Sam'' && age === ''12'' " }}
   BOOM
 {{else}}
   BAMM
 {{/xif}}
</p>

Salida

<p>
  BOOM
</p>

JavaScript: (depende de otro ayudante, sigue leyendo)

 Handlebars.registerHelper("xif", function (expression, options) {
    return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
  });

Ayudante de manillares: {{x EXPRESSION}}

Un ayudante para ejecutar expresiones javascript.

1. La expresión es una cadena que se ha escapado correctamente.
2. Sí, NECESITA escapar correctamente de los literales de cadena o simplemente alternar entre comillas simples y dobles
3. puede acceder a cualquier función o propiedad global, es decir, parseInt(property)
4. este ejemplo asume que pasaste este contexto a tu template( {name: ''Sam'', age: ''20'' } ) manillares template( {name: ''Sam'', age: ''20'' } ) , la age es una string para fines de demostración, puede ser cualquier cosa ...

Uso:

<p>Url: {{x "''hi'' + name + '', '' + window.location.href + '' <---- this is your href,'' + '' your Age is:'' + parseInt(this.age, 10)"}}</p>

Salida:

<p>Url: hi Sam, http://example.com <---- this is your href, your Age is: 20</p>

JavaScript:

Esto parece un poco grande porque amplié la sintaxis y comenté en casi cada línea para mayor claridad.

Handlebars.registerHelper("x", function(expression, options) {
  var result;

  // you can change the context, or merge it with options.data, options.hash
  var context = this;

  // yup, i use ''with'' here to expose the context''s properties as block variables
  // you don''t need to do {{x ''this.age + 2''}}
  // but you can also do {{x ''age + 2''}}
  // HOWEVER including an UNINITIALIZED var in a expression will return undefined as the result.
  with(context) {
    result = (function() {
      try {
        return eval(expression);
      } catch (e) {
        console.warn(''•Expression: {{x /''' + expression + ''/'}}/n•JS-Error: '', e, ''/n•Context: '', context);
      }
    }).call(context); // to make eval''s lexical this=context
  }
  return result;
});

Handlebars.registerHelper("xif", function(expression, options) {
  return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});

var data = [{
  firstName: ''Joan'',
  age: ''21'',
  email: ''[email protected]''
}, {
  firstName: ''Sam'',
  age: ''18'',
  email: ''[email protected]''
}, {
  firstName: ''Perter'',
  lastName: ''Smith'',
  age: ''25'',
  email: ''[email protected]''
}];

var source = $("#template").html();
var template = Handlebars.compile(source);
$("#main").html(template(data));

h1 {
  font-size: large;
}
.content {
  padding: 10px;
}
.person {
  padding: 5px;
  margin: 5px;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>

<script id="template" type="text/x-handlebars-template">
  <div class="content">
    {{#each this}}
    <div class="person">
      <h1>{{x  "''Hi '' + firstName"}}, {{x ''lastName''}}</h1>
      <div>{{x ''"you were born in " + ((new Date()).getFullYear() - parseInt(this.age, 10)) ''}}</div>
      {{#xif ''parseInt(age) >= 21''}} login here:
      <a href="http://foo.bar?email={{x ''encodeURIComponent(email)''}}">
         http://foo.bar?email={{x ''encodeURIComponent(email)''}}
        </a>
      {{else}} Please go back when you grow up. {{/xif}}
    </div>
    {{/each}}
  </div>
</script>

<div id="main"></div>

Moar

Si desea acceder al alcance del nivel superior, este es ligeramente diferente, la expresión es UNIR de todos los argumentos, uso: digamos que los datos de contexto tienen este aspecto:

// data
{name: ''Sam'', age: ''20'', address: { city: ''yomomaz'' } }

// in template
// notice how the expression wrap all the string with quotes, and even the variables
// as they will become strings by the time they hit the helper
// play with it, you will immediately see the errored expressions and figure it out

{{#with address}}
    {{z ''"hi " + "'' ../this.name ''" + " you live with " + "'' city ''"'' }}
{{/with}}

Javascript:

Handlebars.registerHelper("z", function () {
    var options = arguments[arguments.length - 1]
    delete arguments[arguments.length - 1];
    return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''''), options]);
});

Handlebars.registerHelper("zif", function () {
    var options = arguments[arguments.length - 1]
    delete arguments[arguments.length - 1];
    return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''''), options]) ? options.fn(this) : options.inverse(this);
});