handlebars.js - Agregando un desplazamiento a{{@index}} al recorrer en bucle los elementos en los manillares

Question

Estoy iterando sobre una lista en Handlebars usando la ayuda de each ayudante. Dentro de cada bloque, estoy haciendo referencia al índice de bucle actual {{@index}} para imprimir el número consecutivo de un elemento:

<script id="list-item-template" type="text/x-handlebars-template">
{{#each items}}
<li class="topcoat-list__item">
<a href="#{{@index}}">Item number {{@index}}</a>
</li>
{{/each}}
</script>

Esto da el siguiente resultado:

• Número de artículo 0
• Artículo número 1
• Artículo número 2
• ....

El problema es que quiero mostrar un índice compensado que comienza con 1 en lugar de 0.

Intenté realizar cálculos en el índice como {{@index+1}} , pero esto solo conduce a una

Error no detectado: error de análisis

Answer 1

Creo que puedes usar ...

{{math @index "+" 1}}

Answer 2

La biblioteca handlebars-helpers tiene una biblioteca de matemáticas bastante completa en lib/math.js , que incluye un lib/math.js propósito general {{add ab}} definido de la siguiente manera:

/**
* Return the product of a plus b.
*
* @param {Number} a
* @param {Number} b
* @api public
*/
helpers.add = function(a, b) {
return a + b;
};

Si no desea copiar y pegar esto en su proyecto y tiene la posibilidad de usar npm , puede obtener esta dependencia de la siguiente manera:

npm install handlebars-helpers --save

Luego, puede registrar a los ayudantes de matemáticas de la siguiente manera:

const handlebars = require(''handlebars''),
handlebarsHelpers = require(''handlebars-helpers'');
handlebarsHelpers.math({
handlebars: handlebars
});

Answer 3

Los manillares le ofrecen la posibilidad de escribir un ayudante personalizado que maneje esta situación, por ejemplo, una función de ayudante que le permite realizar cálculos en expresiones como la suma y la resta, etc.

La siguiente función registra un nuevo ayudante, que simplemente incrementa un valor en 1:

var Handlebars = require(''handlebars'');
Handlebars.registerHelper("inc", function(value, options)
{
return parseInt(value) + 1;
});

Luego puede usarlo dentro de la expresión del manillar usando la palabra clave inc , como:

{{inc @index}}

Answer 4

Para ampliar la respuesta de Mobiletainment, esta solución permite que el valor que se incrementa se pase como un argumento. Si no se pasa ningún valor, entonces se usa un valor predeterminado de 1.

Handlebars.registerHelper(''inc'', function(number, options) {
if(typeof(number) === ''undefined'' || number === null)
return null;
// Increment by inc parameter if it exists or just by one
return number + (options.hash.inc || 1);
});

Dentro de tu plantilla puedes escribir:

{{inc @index inc=2}}

Answer 5

Resolví este problema por mi mismo agregando una etiqueta corta de script al final de mi código de manillares.

Agregue una clase a donde sea que esté llamando @index y luego el código jQuery a continuación funciona (también puede hacerse usando vanilla JS).

<p class="create_index">
{{@index}}
</p>
<script>
$(".create_index").text(parseInt($(".create_index").text())+1)
</script>

edición 4/28 - Esto ha cambiado para usar vanilla JS para una mejor compatibilidad con versiones anteriores (es decir, IE7, 8):

<span class="create_index"></span>
<script>
var divs = document.querySelectorAll(''.create_index'');
for (var i = 0; i < divs.length; ++i) {
divs[i].innerHTML = i + 1;
}
</script>

document.querySelectorAll tiene una gran compatibilidad pero también podría ser document.getElementsByClassName("create_index")

Answer 6

Respuesta real: https://.com/a/46317662/1549191

Registre un manillar matemático y realice todas las operaciones matemáticas.

app.engine(''handlebars'', exphbs({
helpers:{
// Function to do basic mathematical operation in handlebar
math: function(lvalue, operator, rvalue) {lvalue = parseFloat(lvalue);
rvalue = parseFloat(rvalue);
return {
"+": lvalue + rvalue,
"-": lvalue - rvalue,
"*": lvalue * rvalue,
"/": lvalue / rvalue,
"%": lvalue % rvalue
}[operator];
}
}}));
app.set(''view engine'', ''handlebars'');

Entonces puede realizar directamente la operación en su vista.

 {{#each myArray}}
<span>{{math @index "+" 1}}</span>
{{/each}}