Metatemplating in Nunjucks - nunjucks

Question

I'm working on a Marionette app that has certain repeating UI patterns in Nunjucks, for example:
<div class="custom-input-group">
<input name="username" type="text" id="username" required value="{{ username }}">
<span class="highlight"></span>
<span class="bar"></span>
<label>Username</label>
</div>
<div class="custom-input-group">
<input name="first_name" type="text" id="first_name" required value="{{ first_name }}">
<span class="highlight"></span>
<span class="bar"></span>
<label>First Name</label>
</div>
<div class="custom-input-group">
<input name="last_name" type="text" id="last_name" required value="{{ last_name }}">
<span class="highlight"></span>
<span class="bar"></span>
<label>Last Name</label>
</div>
I'd like to abstract that into either a macro or a partial template, like so:
{% macro field(name, label='', type='text') %}
<div class="custom-input-group">
<input name="{{ name }}" type="{{ type }}" id="{{ name }}" required value={{ name }}>
<span class="highlight"></span>
<span class="bar"></span>
<label>{{ label }}</label>
</div>
{% endmacro %}
So that I can use it like so:
{{ field('username', 'Username') }}
{{ field('first_name', 'First Name') }}
{{ field('last_name', 'Last Name') }}
However, this generates value="username" instead of value="{{ username }}". How can I produce the latter?

Answer 1

Ah I got it. Instead of trying to output another template, I have to pass in the final value to the macro itself, like this:
{% macro field(value, name, label='', type='text') %}
<div class="custom-input-group">
<input name="{{ name }}" type="{{ type }}" id="{{ name }}" required value={{ value }}>
<span class="highlight"></span>
<span class="bar"></span>
<label>{{ label }}</label>
</div>
{% endmacro %}
And then use the macro like this:
{{ field(username, 'username, 'Username') }}
{{ field(first_name, 'first_name', 'First Name') }}
{{ field(last_name, 'last_name', 'Last Name') }}
This is still a little less DRY than I'd like, but heaps better than before.