Welchen Teil dieses Code sind Jade -Vorlagenelemente und welche sind JavaScript -Elemente?

Question

Ich verstehe, dass die Jade -Vorlage -Engine ihre eigenen Vorlagenelemente hat und auch JavaScript unterstützt. Aber im folgenden Code kann ich nicht unterscheiden, welcher Nicht-JavaScript-Code ist (dies ist node.js + Express.js):

Dies ist die Ansichtdatei (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

Dies ist die Serverdatei (app.js):

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

Kann mir jemand helfen, diese Verwirrung zu klären?

Answer 1

Der Jade-Lang Readme hat ein Code Abschnitt, der ins Detail geht, was JavaScript ist und nicht clientseitig ist.

Grundsätzlich, wenn Sie Code in Ihrer Vorlage verwenden und nicht in einem Skript -Tag befindet, wird die Ausgabe dieses JavaScripts verteilt, bevor er ihn an den Browser sendet. Es ist immer noch JavaScript, aber es wird die Serverseite ausgeführt. Jedes JavaScript in einem Skript -Tag ist nur ein normales JavaScript und wird wie alles andere an den Browser gesendet.

---

Wie für das Beispiel, das Sie gepostet haben, ist die Zeile:

- each article in articles

Wird übersetzt in:

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

Ebenfalls:

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

Übersetzt (vereinfacht) zu

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

Aber Jade pariert und macht die Ergebnisse, bevor er an den Browser gesendet wird.