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

Question

Im используя Глоток-веточка: https://github.com/zimmen/gulp-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 записи демо их в странице. прут. Мне нужно отобразить фрагмент как {{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?

Это мой глоток задача:

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

Answer 1

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

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

container.twig и snippet.twig тянут в другую приложения

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

Если вы действительно этим не владеете, вы также можете попробовать сделать свой шаблон с помощью a Twig environment that has autoescape disabled.

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

EDIT: Поскольку вы должны сделать это с помощью Глоток-прутик, что о чем-то вроде этого:

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'); 

Answer 2

Это может быть сделано with macros:

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