Templating solution for nested variables

343 views
Skip to first unread message

fived...@gmail.com

unread,
Jun 9, 2016, 7:21:54 AM6/9/16
to Nunjucks

I have just started employing gulp & nunjucks and my rudimentary js skills for email tempting. 


So far finding it an extremely useful tool but I am stumped on figuring out a solution for a particular problem.


I want to solve the problem of calling a module/partial and assigning different values to the attributes each time it is processed. 

It initially seems like a job for a for loop but the module will not necessarily be called upon in sequence within the template


Within the module there are attributes which are assigned to variables. 

I would like to resolve the variables differently depending on the section that the module is being used for. 


A very basic example would be - in an index file I'd have : 


{% 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 %}





And in the genericMod itself-:


<tr>

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

</tr>





The kind of functionality I'd like to tap into would be to define a “modKey” i.e. a variable within each variable in the module

e.g. 

{{modKey.align}}

{{modKey.src}}

{{modKey.alt}}




Then be able to somehow assign that key each time the module is called: 


<!-- logo start —>

<!— "modKey": "logo" —>

{% include GenericMod %}

<!-- logo end -->


So the above produces: 
<tr>

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

</tr>


<!-- hero start -->

<!— “modKey”: ”hero" —>

{% include GenericMod %}

<!-- hero end -->


and the above produces: 

<tr>

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

</tr>




So that when piped through a json file the respective data 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"
  }


Obviously that's just a hypothetical solution but is there a way of actually achieving something similar? 


Thanks in advance

fived...@gmail.com

unread,
Jun 10, 2016, 10:55:44 AM6/10/16
to Nunjucks
Turns out the solution is very simple (and probably not news to anyone else here) but for the record... 
I had been assigning the value of the context var to a string rather than a variable name so 

{% set modKey = logo %}
{% include oneIncludeFile %}
{% set modKey = hero %}
{% include otherIncludeFile %}
Though a macro might be a better means to achieve this:
{% macro foo(data) %}
<a href="{{ data.href }}"><img src="{{ data.src }}" alt="{{ data.alt }}" /></a>
{% endmacro %}

Thanks to carljm for putting me right with full response here: https://github.com/mozilla/nunjucks/issues/779
Reply all
Reply to author
Forward
0 new messages