Output file missing JSON data

[VincentVToscano]

This is a question/help, I wish I could label it that… I am trying process 1 handlebar template with 1 JSON file. The output file, does not show any of the data from the JSON file. What am I doing wrong?

gulp task:

gulp.task('handlebarsProcess2', function () {
    return gulp
        .src('src/templates/Dreamscape.handlebars')
        .pipe(hb({
            data: 'src/data/dreamscape_data.json'

        }))
        .pipe(concat('templates-processed2.html'))
        .pipe(gulp.dest('build'));
});

Template before:

<div id="Dreamscape{{id}}" class="hello">
    {{#projs}}
        <div id="itemNumber{{id}}" tabindex="0" class="porthole {{addClass}}" style="background:{{bkgd}}">{{id}}</div>
    {{/projs}}
</div>

Template processed/output file:

<div id="Dreamscape" class="hello">
</div>

JSON file:

{
    "id":"myIDHere",
    "projs": [
        {
            "id": "home",
            "addClass": "Home"
        },
        {
            "id": "sec1",
            "addClass": "One"
        }
    ]
}

Thanks for the help.

[shannonmoeller]

Version 2.0 of gulp-hb introduced a breaking change for the data attribute. It's now using require-glob to pull in data which takes filenames into account. Try updating your template to include the filename (without the extension) of your data, like so:

<div id="Dreamscape{{dreamscape_data.id}}" class="hello">
    {{#each dreamscape_data.projs}}
        <div id="itemNumber{{id}}" tabindex="0" class="porthole {{addClass}}" style="background:{{bkgd}}">{{id}}</div>
    {{/each}}
</div>

Or wrap it in a {{#with}} block:

{{#with dreamscape_data}}
    <div id="Dreamscape{{id}}" class="hello">
        {{#projs}}
            <div id="itemNumber{{id}}" tabindex="0" class="porthole {{addClass}}" style="background:{{bkgd}}">{{id}}</div>
        {{/projs}}
    </div>
{{/with}}

[VincentVToscano]

That worked great @shannonmoeller. I used the second method (#with) to process the template. Thank you for reviewing my ticket.

[dkebler]

using #with didn't fix this for me but for my use case I don't need a context anyway.

Any way to get hb to use any data in the data object without having to have to refer to the file from which it came?

I already have a work around which is read my json else where and pass the object to .data which works fine for my use case (changing json file names)

[shannonmoeller]

@dkebler What you've described is exactly what I'd recommend in your case!

.data(require('./path/to/data.json'))

[jgonggrijp]

Version 2.0 of gulp-hb introduced a breaking change for the data attribute. It's now using require-glob to pull in data which takes filenames into account. Try updating your template to include the filename (without the extension) of your data, like so:

<div id="Dreamscape{{dreamscape_data.id}}" class="hello">
    {{#each dreamscape_data.projs}}
        <div id="itemNumber{{id}}" tabindex="0" class="porthole {{addClass}}" style="background:{{bkgd}}">{{id}}</div>
    {{/each}}
</div>

Or wrap it in a {{#with}} block:

{{#with dreamscape_data}}
    <div id="Dreamscape{{id}}" class="hello">
        {{#projs}}
            <div id="itemNumber{{id}}" tabindex="0" class="porthole {{addClass}}" style="background:{{bkgd}}">{{id}}</div>
        {{/projs}}
    </div>
{{/with}}

It would be nice to have this in the README. 👍

[shannonmoeller]

gulp-hb is a gulp wrapper around handlebars-wax which has a section on registering data. I think it would be better to update the documentation in that README and leave this one pretty generic. Feel free to open an issue or PR over there. Thanks!