Variables created this way can be of any data type that can be used in JavaScript. Though the example below isn’t practical, it helps to show how variables can be set and used in their simplest form. If you then just want to put that variable into the DOM as-is, an equals sign can accomplish that. Unlike php, where the code to be executed needs to be wrapped in a tag, all that’s needed to set up a variable in Pug is a hyphen. pug file is very easy to do since it is a JavaScript templating language. Without further adieu, let’s get started! Creating and using variables within Pug Today I’m going to show you how you can use variables and logic in your templates to make them dynamic and flexible, allowing you to write one template to hold lots of different pieces of information that are all formatted the same rather than writing out a separate HTML file for each one.
In my previous post, I showed you how to create elements in Pug with classes, ids, attributes, and nesting.
The innerHTML of #welcome-user becomes equal to Leeroy Jenkins.Using the Pug Templating Engine Part 2 – Logic "address": "123 Wilson Way, New York NY, 10165" If you were to do output the escaped variable ( var user = #), you would receive an escaped version of the object (where quotation marks and apostrophes are converted to '), which is not what we want in order for JSON.stringify to work on it.Īddress: "123 Wilson Way, New York NY, 10165"ĭocument.getElementById("welcome-user").innerHTML = setUsername(user.name) It's also necessary to output the raw contents of the variable, instead of the evaluated form of it. all the information about a user), you must stringify the output in Pug for it to be treated as a JavaScript object. If you need to interpolate the value of a JavaScript object (e.g. Sets the username of the current user to be displayed site-wide This is not necessary for number, where JavaScript will interpret our number as it we intend it to (as a number). In the below example, we have to wrap username in quotation marks in order for JavaScript to interpret it as a string Pug will output the content of the variable as-is, so we need to put it in quotation marks for it to be a proper JavaScript string. In the case of variables, numbers, strings, and the like, you can pass these types of variables directly into your JavaScript with bracket syntax plus an explanation point (so that the code inside the brackets is not evaluated.) This is useful for parametrizing JavaScript code that require something from your server. Interpolating values is helpful if you need to pass a server-side variable to client-side JavaScript (or other languages that require it).
0 kommentar(er)
