Cómo hacer una barra de navegación en un motor de plantilla sin lógica como bigote

Question

Estoy tratando de entender el concepto detrás de templos sin lógica, pero me estoy encontrando golpeando una pared.

Quiero implementar una barra de navegación simple, p. Los enlaces "Inicio, Acerca de, Contacto" en la parte superior de cada página, y el "actual" deben resaltarse con una clase diferente (estoy usando el programa de arranque). Pero, ¿cómo puedo hacer esto de manera sensata? Hasta ahora tengo:

1. Mueva el navegador a cada plantilla, y copie todo (no SECO, feo).
2. Use las teclas en lugar de valores, es decir, con <a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>. Esto es mejor, pero sigue siendo molesto que tengo que crear N variables para mantener el valor de datos de 1 variable.
3. crear la navegación en el controlador, es decir, pase en { 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} } o similar. No me gusta esto porque tiene el problema opuesto de las plantillas sin lógica. Ahora tengo controladores HTML-ful ...

Dadas las opciones anteriores, me gustan (2) las mejores. Pero lo que yo preferiría alguna manera de tener una sola variable para comprobar, como:

// controller 
render('about', {active: 'about'}); 
render('home', {active: 'home'}); 

// mustache nav 
<a href="/" {{#if active == 'home'}}class="active"{{/if}}>Home</a> 
<a href="/about" {{#if active == 'about'}}class="active"{{/if}}>About</a> 

Estoy seguro que esto viene todo el momento de que los expertos bigote --- ¿cuál es la mejor manera de hacer frente a ¿eso?

Answer 1

No hay forma de lidiar con esto usando el bigote vainilla. Tiene dos opciones que permiten a sus datos JSON y la plantilla se mantienen limpios:

1- usando bigote, escribir una función de ayuda de manera que se puede utilizar de esta manera:

var selected_item = function(param) { 
    if (param == this.active) { 
     return 'active'; 
    } 
}; 

(exención de responsabilidad: me escribió esta ayuda fuera de la parte superior de la cabeza, puede que no funcione como está, pero creo que usted consigue el punto)

<a href="/" class="{{#selected_item}}home{{/selected_item}}">Home</a> 
<a href="/about" class="{{#selected_item}}about{{/selected_item}}">About</a> 

luego mezclar en que ayudante en sus datos JSON, la mejor manera de ser, probablemente, la sobrecarga Mustache.render para que cada llamada a render agregue su ayudante a la mezcla. Tenga en cuenta que dejar la parte class="" fuera del helper le permite tener múltiples clases diferentes en cada elemento del menú mientras todavía tiene su "lógica" para la parte activa.

2- cambie a Handlebars que permite este tipo de lógica básica. Handlebars es un superconjunto de Moustache, lo que funciona en vainilla Moustache funcionará directamente en manubrios, por lo que la actualización es fácil. Sin embargo, ten cuidado, una vez que hayas actualizado y modificado tus plantillas para que funcionen con los manubrios, no habrá vuelta atrás.

Answer 2

Acabo de escribir una publicación sobre esto. Haga clic here o en el banner:

La idea básica de hacer esto con el bigote de la vainilla y NodeJS es así:

app.get('/Portfolio', function(req, res) { 
    res.render('portfolio.html', { 
     Portfolio: 'class="current"', 
    }); 
}); 


app.get('/Blog', function(req, res) { 
    res.render('blog.html', { 
     Blog: 'class="current"', 
    }); 
}); 

Observe cómo cada ruta separada envía una variable bigote diferente.Si un usuario va a/Portafolio, la variable {{{Portfolio}}} existirá pero la variable {{{Blog}}} no lo hará.

Utilizando esta idea, configurar el menú de navegación de este modo:

<div id="nav"> 
    <ul> 
     <li><a href="/Portfolio" {{{ Portfolio }}}>Portfolio</a></li> 
     <li><a href="/Blog"  {{{ Blog }}}>Blog</a></li> 
    </ul> 
</div> 

crear la clase .current

#nav li a.current { 
    font-weight: 900; 
} 

Ahora el enlace será resaltado depende del hecho de enrutamiento de llamadas.