通過獨特的JSON數據到車把模板中使用一飲而盡編譯車把

Question

在我index.handlebars文件我這樣做：

{{> article id = 'section-1'}} 
{{> article id = 'section-2'}} 

正如你可以看到我傳遞一個唯一的ID爲每文章模板實例，因此它們可以單獨針對。我這樣做是因爲我想吞食編譯句柄填充每個文章模板實例與我在我的build.json文件中指定的唯一內容。然而，我很難找到關於如何在我的大嘴巴任務中正確執行此操作的文檔。下面的代碼...

在我gulpfile.js我這樣做：

gulp.task('compileHandlebars', function() { 
    var buildSettings = require('./build.json'); 
    var templateData = buildSettings, 
    options = { 
     batch : ['./src/assets/templates/'], 
    } 

    gulp.src('src/index.handlebars') 
     .pipe(handlebars(templateData, options)) 
     .pipe(rename('index.html')) 
     .pipe(gulp.dest('./dist')); 
}); 

在我build.json我這樣做：

{ 
    "section-1":[{ 
     "title": "", 
     "paragraph": "", 
     "backgroundImageUrl": "", 
     "figCaption": "" 
    }], 
    "section-2":[{ 
     "title": ", 
     "paragraph": "", 
     "backgroundImageUrl": "", 
     "figCaption": "" 
    }] 
} 

和終於在我的article.handlebars模板我這樣做：

<section class="row article-module-4" id="{{id}}"> 
    <div class="col-md-5"> 
     {{#if title}} 
      <header> 
       <h2>{{title}}</h2> 
      </header> 
     {{/if}} 
     <p>{{paragraph}}</p> 
     </div> 
    <figure class="col-md-7"> 
     <div class="figure-img" style="background-image: url('{{backgroundImageUrl}}');"></div> 
     <figcaption>{{figCaption}}</figcaption> 
    </figure> 
</section> 

Answer 1

我有點昨晚當丟三落四的，我問這個......今天上午，我找到了我想要做的解決方案...

index.handlebars

{{#each this}} 
    {{> article}} 
{{/each}} 

文章模板

{{#article}} 
    <section class="row article-module" id="{{id}}"> 
     <div class="col-md-5"> 
      {{#if title}} 
       <header> 
        <h2>{{title}}</h2> 
       </header> 
      {{/if}} 
      <p>{{paragraph}}</p> 
      </div> 
     <figure class="col-md-7"> 
      <div class="figure-img" style="background-image: url('{{backgroundImageUrl}}');"></div> 
      <figcaption>{{figCaption}}</figcaption> 
     </figure> 
    </section> 
{{/article}} 

build.json

[ 
    { 
     "article": [ 
      { 
       "id": "section-1", 
       "title": "Section 1", 
       "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra aliquet justo posuere rhoncus. Donec tempus eros sed rhoncus fermentum. Mauris nec congue quam. Morbi ullamcorper augue sed quam lacinia interdum. Duis porttitor iaculis posuere. Donec quis facilisis metus, id posuere ex. Vestibulum tincidunt enim a vehicula ultrices. Vestibulum rhoncus tincidunt augue ut ultrices. Aliquam quis sapien et erat varius fringilla. Nullam finibus pellentesque tortor eget tempus. Donec ultricies quam quis mi tincidunt imperdiet. Pellentesque porta euismod ipsum, ut finibus elit malesuada nec. Vivamus vehicula viverra arcu eu feugiat. Integer dapibus est ac gravida blandit. Morbi malesuada, sem non tincidunt iaculis, enim nisi congue tellus, ac pellentesque dolor neque in lacus. Donec non sem vitae felis accumsan dapibus tristique ut justo.", 
       "backgroundImageUrl": "assets/images/ocean2.jpg", 
       "figCaption": "news.com.au" 
      } 
     ] 
    }, 
    { 
     "article": [ 
      { 
       "id": "section-2", 
       "title": "Section 2", 
       "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra aliquet justo posuere rhoncus. Donec tempus eros sed rhoncus fermentum. Mauris nec congue quam. Morbi ullamcorper augue sed quam lacinia interdum. Duis porttitor iaculis posuere. Donec quis facilisis metus, id posuere ex. Vestibulum tincidunt enim a vehicula ultrices. Vestibulum rhoncus tincidunt augue ut ultrices. Aliquam quis sapien et erat varius fringilla. Nullam finibus pellentesque tortor eget tempus. Donec ultricies quam quis mi tincidunt imperdiet. Pellentesque porta euismod ipsum, ut finibus elit malesuada nec. Vivamus vehicula viverra arcu eu feugiat. Integer dapibus est ac gravida blandit. Morbi malesuada, sem non tincidunt iaculis, enim nisi congue tellus, ac pellentesque dolor neque in lacus. Donec non sem vitae felis accumsan dapibus tristique ut justo.", 
       "backgroundImageUrl": "assets/images/ocean3.jpg", 
       "figCaption": "news.com.au" 
      } 
     ] 
    } 
]