Menu icon Foundation
Filler text/variable handlebar Helper or Partial

I'm starting to work on a handlebar helper that will either output a variable or filler text.

I'm thinking something like.

{{#varFiller 'first_name'}}
  Joe Smith
{{/varFiller}}

So the helper would either output '<% @first_name %>' or 'Joe Smith' dependingo on whether gulp process A or B is running. This way I could say let me see my email templates with filler text or output production emails with variables. And then I'd duplicate this helper and do one for imgFiller that would be variable or filler image url.

Should I make this a helper or a partial?

If I do a partial I could do it like this.

{{> varFiller 'first_name' 'Joe Smith' }}

Then in the partial use a global variable set in the gulp build {{production}} that checks whether the process is for production or just dev build.

fillerhelperpartial

I'm starting to work on a handlebar helper that will either output a variable or filler text.

I'm thinking something like.

{{#varFiller 'first_name'}}
  Joe Smith
{{/varFiller}}

So the helper would either output '<% @first_name %>' or 'Joe Smith' dependingo on whether gulp process A or B is running. This way I could say let me see my email templates with filler text or output production emails with variables. And then I'd duplicate this helper and do one for imgFiller that would be variable or filler image url.

Should I make this a helper or a partial?

If I do a partial I could do it like this.

{{> varFiller 'first_name' 'Joe Smith' }}

Then in the partial use a global variable set in the gulp build {{production}} that checks whether the process is for production or just dev build.

Ethan Hackett over 3 years ago

I ended up writing a handelbar/panini helper that was a combination of the two.

Version 1.0 var-filler.js

module.exports = function(variable, filler, context) {
  if (context.data.root.globals.filler === false) {
    var arr = variable;
  } else {
    var arr = filler;
  }
  return arr;
}

In the code the snippet looks like the following.

{{ var-filler 'first_name' 'John Smith' }}

This will either output first_name or 'John Smith' depending on the build process.

It also required a little tweaking to the panini npm package file render.js (see git tweaks and reasoning) I suggested the change to the repo because without it there doesn't seem to be a way to globally set a paramiter to turn the variable/filler back and forth. So the tweak above lets me set a 'globals' variable in Panini which I can then use later in any helper. In this project I use filler as the object and pass a true/false statement which in return determains whether to output filler or variable names.

function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers',
      globals: { filler : FILLER }
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

Todo: I want might add anothe object in the globals variable option for open and closing the variable. For instance I might want to set whether the output as a ruby variable <% @var %> or a php var <? @var ?> etc so rather than modifying the helper I could pass them along as a globals variable or maybe on a pr value option.

Kevin Ball over 3 years ago

Hi Ethan,

I'm not totally sure, but I think the behavior that you're looking for here may already be handled by the 'data' option of panini:  https://github.com/zurb/panini#user-content-data

It lets you pass in an arbitrary set of data formated as json, yaml, or a straight js file using module.exports.

Ethan Hackett over 3 years ago

Kevin,

I think Will gave a more fitting example here. It looks like the data snippet you mentioned might be able to do it but the data needs to be dynamic to match the gulp process ie dev/prod builds. Wills example shows you could pull yarg properties right into a helper which which is way simpler than pulling going through Panini.

Ethan Hackett over 3 years ago

Just so user don't have to hunt for Will's explination here's what he said on the other thread.

Rather than going through Panini use yargs and access the variable directly in the helper file `var selected = yargs.argv.dealer;`.

"Then my helper file info.js looks like "

import yargs    from 'yargs';

module.exports = function(options) {  
  var selected = yargs.argv.dealer;
  var dealer = options.data.root.dealers[selected];
  var data = dealer[options.fn(this)];   
  return data;
}