Шаблонное решение для вложенных переменных с использованием nunjucks или другого метода

Я только начал использовать gulp & nunjucks для создания шаблонов (электронных писем в данном случае).

Я хочу решить проблему вызова модуля/частиального и присвоения различных значений атрибутам каждый раз, когда он обрабатывается.

Сначала это похоже на задание для цикла for, но модуль не обязательно будет вызываться последовательно внутри шаблона.

Внутри модуля есть атрибуты, которые назначаются переменным. Я хотел бы разрешить эти переменные по-разному в зависимости от раздела, для которого используется модуль.

Очень простой пример: в индексном файле у меня было бы:

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

А в самом genericMod-е:

<tr>

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

</tr>

Тип функциональности, к которой я хотел бы подключиться, - это определить «modKey», то есть переменную внутри каждой переменной в модуле, например.

{{modKey.align}}

{{modKey.src}}

{{modKey.alt}}

Затем можно каким-то образом назначать этот ключ модулю каждый раз, когда он вызывается:

<!-- logo start —>

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

<!-- logo end -->

Таким образом, вышеизложенное производит:

<tr>

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

</tr>

А также:

<!-- hero start -->

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

<!-- hero end -->

производит:

<tr>

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

</tr>

Так что при передаче через файл json соответствующие данные будут отображаться для каждой переменной атрибута:

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

Очевидно, что это всего лишь гипотетическое решение, но есть ли способ добиться чего-то подобного?


npm javascript gulp nunjucks template-engine
person fivedoor    schedule 09.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Оказывается решение очень простое. Я присваивал значение переменной контекста строке, а не имени переменной, когда пытался использовать «набор».

Для записи это работает...

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

где включаемый файл будет ссылаться, например. {{data.alt}} или {{data.href}}.

Хотя макрос может быть лучшим средством для достижения этого:

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

а затем назовите его как {{ foo(logo) }} и {{ foo(hero) }} для передачи разных наборов данных.

Полное объяснение можно найти здесь: https://github.com/mozilla/nunjucks/issues/779< /а>

person fivedoor    schedule 10.06.2016