nunjucks - Nunjucks 中的元模板

Question

我正在开发一个在 Nunjucks 中具有某些重复 UI 模式的 Marionette 应用程序，例如：

<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>

我想将其抽象为一个macro或部分模板，如下所示：

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

这样我就可以像这样使用它：

{{ field('username', 'Username') }}
{{ field('first_name', 'First Name') }}
{{ field('last_name', 'Last Name') }}

但是，这会生成value="username"而不是value="{{ username }}". 我怎样才能生产后者？

Answer 1

啊，我明白了。我必须将最终值传递给宏本身，而不是尝试输出另一个模板，如下所示：

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

然后像这样使用宏：

{{ field(username, 'username, 'Username') }}
{{ field(first_name, 'first_name', 'First Name') }}
{{ field(last_name, 'last_name', 'Last Name') }}

这仍然比我想要的 DRY 少一点，但比以前好多了。