Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use JavaScript code inside templates?

See original GitHub issue

I was wondering whether there is a way to manipulate the template using JavaScript functions or statements inside nunjucks templating.

Suppose, for example, I have a nunjucks file where I need to apply different classes based on resolution and I have already have a function isMobile() which I am using in many places in JS files. So, I thought to use the same function inside the template file. something as shown below:

index.nunjucks

<body>
    <div class="{% if(isMobile()) { %}mobile-class {% else{ %} desktop-class {% } %}">
        <!-- content here -->
    </div>
</body>

Please help.

Issue Analytics

State:
Created 8 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

18reactions

sebringjcommented, Mar 12, 2017

I do completely see the elegance of not having code logic inside your templates and for the majority of cases this is great. However, it would be nice if there was a specific tag or escape syntax that would allow you to evaluate code for the particular implementation’s backing language, in this case JavaScript where nunjucks gets out of the way and just says, OK do your thing, then comes back.

For example, something simple like {{ eval( ‘new Date()).getFullYear()’) }} so it was intentionally inconvenient to write inline yet for small things, it made sense. The environment has the ability to evaluate string of code and requires escaping as well as being on a single line which promotes very tiny evaluations and makes long lines of inline code unmaintainable and ugly.

9reactions

ricordisamoacommented, Jan 30, 2016

Usually most of the logic is embedded in code, not templates. Compared with many other template engines, Nunjucks is quite powerful.

Top Results From Across the Web

The Content Template element - HTML - MDN Web Docs

The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but...

Run JavaScript code in your templates

Run JavaScript code in your templates. Write simple JavaScript code into your templates to automate your note-taking, such as "Moving tasks ...

Explaining Javascript Templates and How We're Using Them ...

Popularized by John Resig, Javascript templating is a fast and efficient technique to render client-side templates with Javascript using a JSON ...

Best Practices When Working With JavaScript Templates - Code

All JavaScript templates obviously start out as text. The most popular (and natural) place to store them is within your HTML document -...

JavaScript Template Literals - W3Schools

Back-Tics Syntax · Quotes Inside Strings · Multiline Strings · Interpolation · Variable Substitutions · Expression Substitution · HTML Templates · Browser Support....