Passing data to Template

[juanitoddd]

Hello, maybe a obvious question, but I dont find any reference to it

How can I (from the Webpack config) pass data as an Object to the Handlebars template ?

Thanks

[tejasbubane]

Ignore if you are not using html-webpack-plugin.

If you are using html-webpack-plugin to generate html files, you need to pass data from html-plugin initializer like this:

plugins: [
    new HtmlWebpackPlugin({
      page: 'home',
      filename: 'index.html',
      template: 'templates/index.handlebars',
    }),
]

Add access it like {{htmlWebpackPlugin.options.page}}.

[loadedsith]

You could create a block handler. I'm not sure it's any better than @tejasbubane's solution though.

src/handlebars/helpers/fetch.js

/** fetches a json, defaults to pages.json */
module.exports = function(source = 'pages', options) {
  return options.fn(require(__dirname + '/../../public/data/' + source + '.json'));
};

index.hbs

[...]
{{#content 'pages'}}
  {{log 'content!'}}
  {{log page}}
{{/content}}
[...]

../../public/data/pages.json

{
  page: "some content"
}

webpackConfig.js

[...]
  // Initialize module
  config.module = {
    // preLoaders: [],
    rules: [{
      // other loaders...
     {
      test: /\.hbs$/,
      loader: 'handlebars-loader',
      query: {
        helperDirs: [
          __dirname + "/src/handlebars/helpers"
        ]
      }
    }]
  };
[...]

[aldiarian]

Just add to your webpack.config.js

new HTMLWebpackPlugin({
    template: './path/to/your/file.hbs',
    templateParameters:require('./path/to/your/items.json')
}),

and use a json file

{
  "items": [
    {
      "stock": 261,
      "price": "€10.47",
      "image": "https://loremflickr.com/120/120"
    },
    {
      "stock": 292,
      "price": "€8.74",
      "image": "https://loremflickr.com/120/120"
    }
  ]
}

it works for me!!

[aldiarian]

Here you have an example https://github.com/aldiarian/webpack-project. if you want, download it and install it: *npm i *to install and npm start to run . You can see how I use the data in handlebars

Hope this can help you.

Alberto

El sáb., 5 ene. 2019 a las 21:46, Sason Braha ([email protected]) escribió:

Just add to your webpack.config.js

new HTMLWebpackPlugin({

template: './path/to/your/file.hbs',

templateParameters:require('./path/to/your/items.json')

}),

and use a json file

{

"items": [

{

  "stock": 261,

  "price": "€10.47",

  "image": "https://loremflickr.com/120/120"

},

{

  "stock": 292,

  "price": "€8.74",

  "image": "https://loremflickr.com/120/120"

}

]

}

it works for me!!

How to access the data inside the template? For example, how too loop over it? I tried something but didn't see any output.

{{#each items}}

hello

{{/each}}

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/pcardune/handlebars-loader/issues/126#issuecomment-451689070, or mute the thread https://github.com/notifications/unsubscribe-auth/AFo2Q8rYzB394hjYUVkI_RGAdO0cSnh-ks5vAQ8TgaJpZM4Mrbbw .

[appsparkler]

+ to @aldiarian 's response:

new HTMLWebpackPlugin({
    template: './path/to/your/file.hbs',
    templateParameters:require('./path/to/your/items.json')
}),

and use a json file

{
  "foo": "bar",
  "items": [
    {
      "stock": 261,
      "price": "€10.47",
      "image": "https://loremflickr.com/120/120"
    },
    {
      "stock": 292,
      "price": "€8.74",
      "image": "https://loremflickr.com/120/120"
    }
  ]
}

and in the hbs template

<h1>{{ foo }}</h1>

will output:

<h1>bar</h1>

Good Luck...

[danwild]

I struggled a bit with the syntax for passing data to nested helpers, and was seeing:

options.fn is not a function

Syntax seems a little odd but I'm no HB expert - for anyone else:

Lets say helper is in helpersDir/foo/bar.js

Template should use like:

{{#[foo/bar] myData}}
  // do stuff
{{/foo/bar}}