¿Qué parte de este código son los elementos de la plantilla de Jade y cuáles son los elementos de JavaScript?

Question

Lo que entiendo es que el motor de plantilla Jade tiene sus propios elementos de plantilla y también admite algunos JavaScript. Pero en el siguiente código no puedo distinguir cuál es un código no JavaScript (este es node.js + Express.js):

Este es el archivo de vista (index.jade):

h1= title
#articles
    - each article in articles
      div.article
        div.created_at= article.created_at
        div.title 
            a(href="/blog/"+article._id.toHexString())!= article.title
        div.body= article.body

Este es el archivo del servidor (app.js):

app.get('/', function(req, res){
    articleProvider.findAll( function(error,docs){
        res.render('index.jade', { locals: {
            title: 'Blog',
            articles:docs
            }
        });
    })
});

¿Alguien puede ayudarme a aclarar esta confusión?

Answer 1

El readme jade-lang tiene un Código Sección que entra en detalles sobre lo que es y no es JavaScript del lado del cliente.

Básicamente, si usa código dentro de su plantilla, y no está dentro de una etiqueta de script, representará la salida de ese JavaScript antes de enviarlo al navegador. Todavía es JavaScript, pero está ejecutado del lado del servidor. Cualquier javascript dentro de una etiqueta de script es simplemente JavaScript normal y se envía al navegador como todo lo demás.

---

En cuanto al ejemplo que publicó, la línea:

- each article in articles

Se traduce en:

for (var article in articles) {
    /* Whatever else is going on in the template */
}

También:

a(href="/blog/"+article._id.toHexString())!= article.title

Traduce (simplificado) a

"<a href=\"/blog\"" + article._id.toHexString() + ">" + /* Escaped article.title */ + "</a>"

Pero Jade analiza y presenta los resultados antes de que se envíen al navegador.