3

He intentado hacer una condicional, pero parece que no te permiten hacerlo.Lo que trato de hacer en mi codigo es una paginacion, en el cual, la condicional seria que la pagina en la que estoy es la 1, que mi pagina una este desabilitada, y si no pues que me muestre las siguientes.Alguien sabe como hacer una condicional dentro del motor de plantilla handlebars ?

{{#if pages }}
        <nav class="">
            <ul class="pagination-menu">
                <div class="flex">
                    {{#if current == 1}}
                    <li class="disabled"><a href="/blog/1">1</a></li>
                    {{else}}
                    <li class=""><a href="/blog/1">2</a></li>
                    <li class=""><a href="/blog/1">3</a></li>
                    <li class=""><a href="/blog/1">4</a></li>
                    {{/if}}
                </div>
            </ul>
        </nav>
{{/if}}

1 respuesta 1

5

El problema es que Handlebars no realiza operaciones de comparación, sólo evalúa si el argumento a if es truthy o falsy.

Una solución es registrar tu propia función block helper, la cual devolverá un valor true o false que Handlerbars podrá entender.

let current = 1; // <- Deberías realizar la asignación dinámicamente, no en la vista HTML
Handlebars.registerHelper('isCurrent', (a, opts) => {
    return a == current ? opts.fn(this) : opts.inverse(this);
});

Luego puedes aplicar tu helper al condicional de la siguiente manera:

{{#if pages }}
    <nav class="">
        <ul class="pagination-menu">
            <div class="flex">
                {{#each pages}}
                    {{#isCurrent this}}
                        <li class="disabled"><a href="/blog/{{this}}">{{this}}</a></li>
                    {{else}}
                        <li class=""><a href="/blog/{{this}}">{{this}}</a></li>
                    {{/isCurrent}}
                {{/each}}
            </div>
        </ul>
    </nav>
{{/if}}

Puedes ver una implementación básica en el siguiente fiddle.

Si lo que deseas es realizar una simple comparación como lo estabas haciendo, entonces lo puedes hacer de la siguiente forma:

Handlebars.registerHelper('isEqual', (a, b, opts) => {
    return a == b ? opts.fn(this) : opts.inverse(this);
});

Luego en tu plantilla lo usas como lo tenías:

{{#if pages }}
    <nav class="">
        <ul class="pagination-menu">
            <div class="flex">
                {{#each pages}}
                    {{#isEqual this 1}}
                        <li class="disabled"><a href="/blog/{{this}}">{{this}}</a></li>
                    {{else}}
                        <li class=""><a href="/blog/{{this}}">{{this}}</a></li>
                    {{/isEqual}}
                {{/each}}
            </div>
        </ul>
    </nav>
{{/if}}

Puedes ver un ejemplo funcionando en el siguiente fiddle

Espero que esto te ayude a resolver el problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.