使用gulp编译工具栏将唯一的json数据传递到车把模板中。

Question

在我的index.handlebars文件中，我要这样做：

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

正如您所看到的，我将一个唯一的Id传递到每个项目模板实例中，这样它们就可以单独地成为目标。我这样做是因为我希望gulp-compile-handlebars用我在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"
            }
        ]
    }
]