pug.render(source, ?options, ?callback) ¶ source : string The source Pug template to render options : ?options An options object, also used as the locals object callback : ?function Node.js-style callback receiving the rendered results. compileClient( 'string of pug', options) source : string The Pug template to compile options : ?options An options object returns : string A string of JavaScript representing a function var pug = require( 'pug') => 'of pug' pug.compileClient(source, ?options) ¶Ĭompile a Pug template to a string of JavaScript, which can be used client side. compileFile( 'path to pug file', options) path : string The path to a Pug file options : ?options An options object returns : function A function to generate the HTML from an object containing locals var pug = require( 'pug') => 'of pug' pug.compileFile(path, ?options) ¶Ĭompile a Pug template from a file to a function, which can be rendered multiple times with different locals. Render the function var html = fn( locals) source : string The source Pug template to compile options : ?options An options object returns : function A function to generate the HTML from an object containing locals var pug = require( 'pug') Methods ¶ pug.compile(source, ?options) ¶Ĭompile a Pug template to a function, which can be rendered multiple times with different locals. name : string The name of the template function. For all other compilation or rendering types, the default is false. For compileClient functions, the default is true (so that one does not have to include the runtime). inlineRuntimeFunctions : boolean Inline runtime functions instead of require-ing them from a shared version. cache : boolean If set to true, compiled functions are cached. globals : Array Add a list of global names to make accessible in templates. It is enabled by default, unless used with Express in production mode. compileDebug : boolean If set to true, the function source will be included in the compiled template for better error messages (sometimes useful in development). debug : boolean If set to true, the tokens and function body are logged to stdout. It will speed up the compilation, but instead of writing variable you will have to write self.variable to access a property of the locals object. self : boolean Use a self namespace to hold the locals. filters : object Hash table of custom filters. Too often, it creates subtle bugs in your templates because of the way it alters the interpretation and rendering of whitespace, and so this feature is going to be removed. We strongly recommend against using this option. If a string is specified, that will be used as indentation instead (e.g.
pretty : boolean | string Adds whitespace to the resulting HTML to make it easier for a human to read using ' ' as indentation. See doctype documentation for more information.
It is sometimes useful to get self-closing tags and remove mirroring of boolean attributes. doctype : string If the doctype is not specified as part of the template, you can specify it here. basedir : string The root directory of all absolute inclusion. Used in exceptions, and required for relative include\s and extend\s. render( 'p Hello world!') Īll API methods accept the following set of options: filename : string The name of the file being compiled. Join over 13k others.Pug is available in your Web browser’s console! To test drive Pug’s API, as documented on this page, try entering: pug.
Event listener iteration pug template how to#
Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. 🔥 Hot off the press! Explore new guides on Testing Vanilla JS and working with the command line, part of a new Tooling Bundle. It’s more performant to have a single event listener that listens for all clicks and check if the element has a selector you want than it is to attach a bunch of individual listeners. I think the danger of accidentally doing so is too great, and as a best practice, would recommend avoiding setting event listeners this way. So we’re cool as long as we don’t use i in the event listener? When you try to log btns in the event listener, it’s try to reference an index that doesn’t exist in the node list. When our i < btns.length check runs, it fails because i is bigger than the number of items in our node list, and the loop ends. It changes.Īfter the last iteration of the loop, i is increased by 1 one last time. The value does not remain constant within the scope of your event listener callback function. Why is that? The i variable isn’t scoped to the loopĪfter each iteration of the loop, the i variable increases by 1.
You can see in the demo that the buttons initially log fine, and event.target works, but btns logs undefined. querySelectorAll ( 'button' ) for ( var i = 0 i < btns.
0 kommentar(er)
