Efficient way to handle nested variables in templates with Nunjucks or alternative approaches

Question

Efficient way to handle nested variables in templates with Nunjucks or alternative approaches

Recently I've been exploring the world of gulp and nunjucks templating, specifically for creating emails.

One challenge I'm facing is figuring out how to call a module/partial and assign different values to its attributes each time it's processed.

While my initial thought was to use a for loop, the modules won't always be called sequentially within the template.

Within these modules, there are attributes assigned to variables that I'd like to resolve differently based on the section where the module is used.

For example, in an index file:

{% block content %}


<!-- logo start -->

{% include genericMod %}

<!-- logo end -->


<!-- some other section start -->

{% include someOtherMod %}

<!-- some other section end -->


<!-- hero start -->

{% include genericMod %}

<!-- hero end -->


{% endblock %}

In the genericMod itself:

<tr>

 <td class="full-width-image" align="{{align}}" ><img src="{{src}}" alt="{{alt}}"/></td>

</tr>

I would like to introduce a functionality where I can define a "modKey" variable within each attribute of the module. For example:

{{modKey.align}}

{{modKey.src}}

{{modKey.alt}}

Then, somehow assign that key to the module each time it's called:

<!-- logo start —>

{% include genericMod "modKey": "logo" %}

<!-- logo end -->

So that when using JSON data, the respective values would be rendered for each attribute variable:

"logo": {
    "alt": "some logo alt text",
    "href": "http://www.someurl.com",
    "align": "left"
  },
 "hero": {
    "alt": "some hero alt text",
    "href": "http://www.someotherurl.com",
    "align": "centre"
  }

This is just a concept, but I'm wondering if there's a way to actually achieve something similar?

javascript npm gulp template-engine nunjucks

Answer 1

Answer №1

After some trial and error, I discovered a surprisingly simple solution to my issue. Instead of assigning the value of the context variable to a string, I needed to assign it to an actual variable name when using 'set'.

Just to clarify, this is the correct way to do it:

{% set data = logo %} 
{% include oneIncludeFile %} 
{% set data = hero %} 
{% include otherIncludeFile %}

In these include files, you would reference something like {{ data.alt }} or {{ data.href }}.

Although using a macro might be a more efficient approach:

{% macro foo(data) %} 
<a href="{{ data.href }}"><img src="{{ data.src }}" alt="{{ data.alt }}" /></a> 
{% endmacro %}

You could then call it with {{ foo(logo) }} and {{ foo(hero) }} to pass in different sets of data.

If you want more details, check out: https://github.com/mozilla/nunjucks/issues/779

Answer 2

After some trial and error, I discovered a surprisingly simple solution to my issue. Instead of assigning the value of the context variable to a string, I needed to assign it to an actual variable name when using 'set'.

Just to clarify, this is the correct way to do it:

{% set data = logo %} 
{% include oneIncludeFile %} 
{% set data = hero %} 
{% include otherIncludeFile %}

In these include files, you would reference something like {{ data.alt }} or {{ data.href }}.

Although using a macro might be a more efficient approach:

{% macro foo(data) %} 
<a href="{{ data.href }}"><img src="{{ data.src }}" alt="{{ data.alt }}" /></a> 
{% endmacro %}

You could then call it with {{ foo(logo) }} and {{ foo(hero) }} to pass in different sets of data.

If you want more details, check out: https://github.com/mozilla/nunjucks/issues/779

Efficient way to handle nested variables in templates with Nunjucks or alternative approaches

Answer №1

Similar questions

JavaScript - The onkeypress event continuously adds text to the end

Launching an Angular application from the local server

The Google Visualization chart fails to display properly once CSS is applied

Hey there, could you please set up the DateTimePicker in my expo project using React Native?

Tips for displaying my libraries' function arguments while hovering in VSCode

Creating a tool that produces numerous dynamic identifiers following a specific format

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

When a Vue.js datepicker is set as required, it can be submitted even if

I am experiencing difficulties with my Angular 8 NPM package as it is unable to locate its own

Python responding to an Ajax request using jQuery

Vitejs is currently loading the entire bundle size instead of just the specific selected files

Secure Access with Skype Bot Verification

What is the purpose of Jenkins creating a temporary volume alongside the workspace?

Combine less files in webpack to generate a single minified CSS output file

The State Hook error "state variable is not defined" arises due to an issue with the state declaration in

What is the best way to incorporate a function within a $.click (jquery) event that utilizes an id directly from the clicked element?

Fixing the Responsive Menu Issues

Create a collection of functions within an array that each return promises

The JSON array data is coming back as undefined

Struggling to determine whether an array contains data or is void in ReactJS?