Tengo una serie de datos que van a ser referenciados en diferentes partes de la página, por una lado se va a un índice con enlaces a otras partes con más detalle. Y el problema que tengo es que se duplican los IDs (lo cual es malo porque es HTML no válido y las referencias fallan).
Aquí se puede ver un ejemplo funcionando con el problema. Drácula tiene alergia al sol, que le produce dos tipos de reacciones, pero como las reacciones no tienen identificador, el ID generado para cada una de ellas es el mismo:
var paciente = {
"nombre": "Drácula",
"alergias": [
{
"id": 1,
"nombre": "Sol",
"reacciones": [
{
"nombre": "Urticaria",
"gravedad": "Baja",
"descripcion": "Ocurre en pequeñas dosis."
},
{
"nombre": "Quemaduras",
"gravedad": "Alta",
"descripcion": "Puede producir la muerte del paciente."
}
]
},
{
"id": 2,
"nombre": "Cruces",
"reacciones": [
{
"nombre": "Quemaduras",
"gravedad": "Media",
"descripcion": "Al contacto."
}
]
}
]
};
var fuente = $("#alergias-template").html();
var template = Handlebars.compile(fuente);
var output = template(paciente);
$("body").append(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script id="alergias-template" type="text/x-handlebars-template">
<section id="allergies">
<h1>Alergias de {{nombre}}</h1>
<ul>
{{#each alergias}}
<li>
{{nombre}}
<ul>
{{#each reacciones}}
<li><a href="#alergia{{../id}}reaccion">{{nombre}}</a></li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
<h2>Descripción</h2>
{{#each alergias}}
<section>
<h3>{{nombre}}</h3>
<div>
Esta alergia produce:
<ul>
{{#each reacciones}}
<li id="alergia{{../id}}reaccion">
{{nombre}} de gravedad {{gravedad}}.<br/> {{descripcion}}
</li>
{{/each}}
</ul>
</div>
</section>
{{/each}}
</section>
</script>
¿Existe alguna manera de añadir un contador del elemento que se está procesando en una colección dentro del {{#each}}
? De ese modo podría añadir ese contador al identificador de las reacciones y solucionar mi problema de los IDs duplicados.
Nota: los valores de la variable paciente
realmente son el resultado de una llamada a una API que yo no controlo, por lo que no puedo cambiarlos de ninguna manera. Si no, simplemente añadiría una propiedad "id" a las reacciones y ya estaría listo.