Menu icon Foundation
Injecting global data into template

Ok so I am not sure I am wording this correctly, but the concept is we have a client with a fair number of locations.  Each has its own phone number, address, etc, etc. I want to work within the foundation email framework but not have a seperate footer partial or seperate framework for each.  How can I loop it in as a variable in the beggining without doing a find and replace dot notation.

// This would work 
{{store.virginiaLocation.phone}}

// But I want it to be something like this 
var location = virginiaLocation;

{{store.location.phone}}
{{store.location.email}}

// or even simplier
// perhaps using a --flag during npm or handlebar helper

{{store.phone}}
{{store.email}}

 

data

Ok so I am not sure I am wording this correctly, but the concept is we have a client with a fair number of locations.  Each has its own phone number, address, etc, etc. I want to work within the foundation email framework but not have a seperate footer partial or seperate framework for each.  How can I loop it in as a variable in the beggining without doing a find and replace dot notation.

// This would work 
{{store.virginiaLocation.phone}}

// But I want it to be something like this 
var location = virginiaLocation;

{{store.location.phone}}
{{store.location.email}}

// or even simplier
// perhaps using a --flag during npm or handlebar helper

{{store.phone}}
{{store.email}}

 

Ethan Hackett over 3 years ago

Will,

I'm not sure if this would help but I was exploring global variables in INK recently and found a possible solution.

Here's why I went the route I did - http://foundation.zurb.com/forum/posts/39280-filler-textvariable-handlebar-helper-or-partial

Here's the npm package comment https://github.com/zurb/panini/issues/51

Pros: you could use `yargs` which is already included in ink to pass a variable to a custom build like this... `npm run location South-Beath` and then it would pass the argument `South-Beath` as a variable to your gulp build, define the globals variable in panini which passes it down stream to your templates.

Cons: At the moment this would be a custom change to the panini npm package which means it would break when you update the package and you'd need to fix it manually after each update. I requested that globals be added to panini for the future but at the moment it's a work around.

I hope that helps @ethanhackett

will hart over 3 years ago

Ethan,

 

Thanks for the thought. Prior to this 2.0 release I was using a custom set up with some gulp env flags.  I decided to do the same with yargs. 

So I modified the package.json file to include another flag 

  "scripts": {
    "start": "gulp --dealer",
    "build": "gulp --production --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;
}

I have a master data file in /data/ and make a call within template like 

<h2>{{#info}}name{{/info}}</h2>
<tel>{{#info}}phone{{/info}}</tel>

This seemed much easier than changing panini. So a sample run would be 

 npm start hondaVirginia

 

Ethan Hackett over 3 years ago

Oh interesting so it looks like in your info.js example you can pull yarg variables. That's cool I just assumed it was too far down stream to maintain arguments.

Ethan Hackett over 3 years ago

Works great thanks Will!