Menu
In my Express JS web app, a login route renders some variables to the login pug view.
In login.js
router.get('/login', function(req, res, next) {
var locations = ["Location 1", "Location 2"];
var count = 0;
var title = 'Login';
console.log("req.originalUrl=" + req.originalUrl);
res.render('login', {
title: title, // Give a title to our page
jsonData: locations, // Pass data to the View
count: locations.length,
originalUrl: req.originalUrl
});
});
In login.pug
extends layout
block content
div(class='container mt-3')
h2 Welcome to #{title}, #{count}, #{originalUrl}
a(class="btn btn-primary" href="/location/new" role="button") NEW
br
br
ul#locList(class='list-group')
for location in jsonData
li(class="list-group-item")
a(href='#{originalUrl}' + '?' + location, class='list-group-item list-group-item-action')
h2=location
The originalUrl variable in the a href was not evaluated as 'http://localhost:3000/login?Location%201', but 'http://localhost:3000/login#{originalUrl}?Location%201' instead.
Then I had to change it to 'a(href=originalUrl + '?' + location, class='list-group-item list-group-item-action')' in order to make it work.
In a nutshell, a(href='#{originalUrl}') does not work while a(href=originalUrl) works, for a href.
However, the same variable was correctly evaluated at line 'h2 Welcome to #{title}, #{count}, #{originalUrl}' as 'Welcome to Login, 2, /login'.
How was the same variable evaluated differently on a href from h2?
746
href”, append the variable to it (Here we have used a variable named “XYZ”). Then we need to append the value to the URL. Now our URL is ready with the variable and its value appended to it. In the example below, we will append a variable named 'XYZ' and its value is 55.
The names of the variables in your Pug file become siteColors and siteNames . To set the entirety of an HTML element equal to a variable, use the equals operator = to do so. If your variable needs to be embedded inline, use bracket syntax #{} to do so.
The tag interpolation syntax is especially useful for inline tags, where whitespace before and after the tag is significant. By default, however, Pug removes all spaces before and after tags. Check out the following example:
By default, however, Pug removes all spaces before and after tags. Check out the following example: p | If I don't write the paragraph with tag interpolation, tags like strong strong | and em em | might produce unexpected results. p. If I do, whitespace is #[strong respected] and #[em everybody] is happy.
This is where the Pug HTML preprocessor comes in. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a mishmash of HTML stings inside JavaScript. This can be a nightmare to debug and to maintain. Pug is a template engine for Node and for the browser.
This will allow you to enter Pug code into the HTML pane and see the result appear in real time. As an added bonus, you can click on the down arrow in the HTML pane and select View Compiled HTML to see the markup that Pug has generated.
This is known behavior that came about a few versions ago (I think 2016). This #{style} interpolation is not supported in attributes:
Caution
Previous versions of Pug/Jade supported an interpolation syntax such as:
a(href="/#{url}") Link This syntax is no longer supported. Alternatives are found below. (Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.)
For more see: https://pugjs.org/language/attributes.html
You should be able to use regular template literals:
a(href=`${originalUrl}`)
There is an easy way to do that, write directly the variable, without using quotes, brackets, $, !, or #, like this:
a(href=originalUrl) !{originalURL}
The result of this is a link with the text in originalURL
Example: if originalUrl = 'www.google.es'
a(href='www.google.es') www.google.es
finally you get the link: www.google.es
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
