Включить шаблон ветки в качестве объекта, который будет передан в другой шаблон?

Im с использованием gulp -twig: https://github.com/zimmen/gulp-twig

У меня есть файл twig для моего компонента контейнера:

{# container.twig #}
<div class="container">
  {% for item in items %}
    <div class="container__item">

      {{ item }}

    </div>
  {% endfor %}
</div>

У меня также есть файл фрагмента:

{# snippet.twig #}
<div class="snippet">
  <h2>{{ title }}</h2>
</div>

Im demoing их в page.twig. Мне нужно отобразить фрагмент как {{item}} в контейнере. Поэтому при просмотре page.twig это должен быть выход:

<div class="container">
    <div class="container__item">

      <div class="snippet">
        <h2>title</h2>
      </div>

   </div>
   <div class="container__item">

     <div class="snippet">
       <h2>title</h2>
     </div>

   </div>
   <div class="container__item">

     <div class="snippet">
       <h2>title</h2>
     </div>

   </div>
</div>

Теперь вот где это становится сложно. container.twig и snippet.twig втягиваются в другое приложение. Таким образом, {{item}} внутри container.twig не может быть изменен на нечто вроде {{itemRenderer (item)}}.

Однако page.twig не используется нигде, поэтому я могу его редактировать, но мне нравится. Есть ли способ в page.twig визуализировать container.twig с snippet.twig как элемент, без изменения container.twig или snippet.twig?

Это моя задача gulp:

var gulp    = require('gulp'),
  config    = require('../config'),
  utilities     = require('../build-utilities'),
  src       = config.path.src,
  dest      = config.path.dest,
  opts      = config.pluginOptions,
  env       = utils.getEnv(),
  plugins   = require('gulp-load-plugins')(opts.load);

var compile = function() {
  var notProdOrTest = env.deploy && !env.prod && !env.test,
    deployPath    = env.deployPath,
    sources = (env.deploy) ? ((env.styleguide) ? src.twig.styleguide: src.twig.testing): src.twig.all;
  return gulp.src(sources, {base: 'src/'})
    .pipe(plugins.twig({
      data: {
        component: utils.getDirectories('src/component/'),
        deploy    : env.deploy,
        test      : env.test,
        prod      : env.prod
      }
    }))
    .pipe(plugins.htmlmin(opts.htmlmin))
    .pipe(plugins.tap(function(file){
      file.path = file.path.replace('testing/', '');
    }))
    .pipe((notProdOrTest) ? plugins.replace(/src="\//g, 'src="/' + deployPath.root + '/'): plugins.gutil.noop())
    .pipe((notProdOrTest) ? plugins.replace(/href="\//g, 'href="/' + deployPath.root + '/'): plugins.gutil.noop())
    .pipe((notProdOrTest) ? plugins.replace(/srcset="\//g, 'srcset="/' + deployPath.root + '/'): plugins.gutil.noop())
    .pipe((notProdOrTest) ? plugins.replace(/url\('\//g, 'url(\'/' + deployPath.root + '/'): plugins.gutil.noop())
    .pipe(gulp.dest((env.deploy) ? deployPath.markup: dest.markup));
},
  watch = function() {
    gulp.watch(src.twig.watch, ['twig:compile']);
  };

module.exports = {
  compile: compile,
  watch  : watch
};

Ответ 1

Я не вижу, как это возможно, без изменения container.html.twig, поскольку вы пытаетесь отобразить {{ item }}, который предназначен для HTML, без фильтра raw, который является обязательным для отметьте содержимое {{ item }} безопасным для HTML.

Если вы являетесь владельцем источника файла container.html.twig (не уверен, что вы имели в виду под

container.twig и snippet.twig втягиваются в другой Приложение

), возможно, вы могли бы изменить {{ item }} на {{ item|raw }}. Тогда вам просто нужно убедиться, что параметр items, переданный в container.html.twig, содержит HTML, сгенерированный renderView из snippet.html.twig. Тогда просто будьте осторожны, container.html.twig не используется где-то еще с HTML-небезопасным items.

Если у вас действительно нет ваших рук, вы также можете попробовать создать свой шаблон с средой Twig, у которой autoescape отключено.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ:. Поскольку вы должны сделать это с помощью gulp -twig, что бы это произошло:

var titles = ['First snippet', 'second snippet'];
var i, items;
for (i = 0; i < titles.length; i++) {
    gulp.src('/path/to/snippet.html.twig')
        .pipe(plugins.twig({
            data: {
                title: titles[i]
            }
        }))
        .pipe(plugins.intercept(function(file){
              items[i] = file.contents.toString();
              return file;
        }));
}

gulp.src('/path/to/container.html.twig')
    .pipe(plugins.twig({
            data: {
                items: items
            }
        }))
     .dest('/path/to/dest.html');

Ответ 2

Это можно сделать с помощью макросов:

{# macros.html.twig #}
{% macro thisItem(item) %}
    <div class="this-snippet">
        <h2>{{ item.title }}</h2>
    </div>
{% endmacro %}

{% macro thatItem(item) %}
    <div class="other-snippet">
        <h2>{{ item.title }}</h2>
    </div>
{% endmacro %}

{% macro container(itemRenderer, items) %}
    <div class="container">
        {% for item in items %}
            <div class="container__item">
                {{ itemRenderer(item) }}
            </div>
        {% endfor %}
    </div>
{% endmacro %}

И затем в шаблоне:

{# template.html.twig #}
{% from "macros.html.twig" import thisItem as itemRenderer, container %}

{% container(itemRenderer, items) %}

И в другом шаблоне:

{# template2.html.twig #}
{% from "macros.html.twig" import thatItem as itemRenderer, container %}

{% container(itemRenderer, items) %}

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

{# snippet.html.twig #}
<div class="this-snippet">
    <h2>{{ item.title }}</h2>
</div>

{# container.html.twig #}
<div class="container">
    {% for item in items %}
        <div class="container__item">
            {% include snippetTmpl with { 'item': item } only %}
        </div>
    {% endfor %}
</div>

{# page.html.twig #}
{% include "container.html.twig" with { 'snippetTmpl': 'snippet.html.twig', 'items': items } only %}