Dashes in global data variable names

[paulrobertlloyd]

Given the following frontmatter:

fruit: Apple
is-it-tasty: Yes

I can access the first value within a collection loop using the item.data.fruit variable, and on pages by using fruit.

For the second value, given its hyphenated nature, I’ll need to use the bracket notation. Within a collection loop I can access it using item.data['is-it-tasty'], but how can I access this value on a page? I tried page.data['is-it-tasty'], but that didn’t work, nor did data['is-it-tasty']. What’s the expected approach?

(Side note: the apparent discrepancy between item.data.thing within loops, and just thing on pages keeps tripping me up 🙃.)

[zachleat]

Hmm as a short term solution I did find a way to do this in Nunjucks. It’s related to this mozilla/nunjucks#833

Just using {{ is-it-tasty }} works as expected in Liquid.

What other engines are you using?

Gonna leave this open because it needs more work, but I’ll attach those test cases for Liquid and Nunjucks.

[zachleat]

Here’s the filter for a workaround in Nunjucks: e7cd430#diff-51893acfe86995eb32c931a0dbca7842R113

[edwardhorsford]

If you want even more, you can return the current context (which I usually pipe to a debug filter).

// Returns current context - useful for debugging
exports.getContext = function() {
  return this.ctx;
}

[paulrobertlloyd]

Just using {{ is-it-tasty }} works as expected in Liquid.

Huh, so it does! Think I got distracted by a.) using Nunjucks on a different project where I believe you can’t use - in variable names and b.) my syntax highlighter for Liquid showing the hyphen in a different colour, so I assumed it would be processed as a minus operator in Liquid, too. So, this fixes my particular issue, but better docs on data would still help. Thanks @zachleat!

[zachleat]

Going to go ahead and close this as it seems like an edge case to me, but just for future searchers here is the workaround in Nunjucks to reference a global variable with dashes in the variable name.

module.exports = function(eleventyConfig) {
  eleventyConfig.addNunjucksFilter("getVarFromString", function(varName) {
    return this.getVariables()[varName];
  });
};

and then in your Nunjucks template:

{{ 'my-global-name' | getVarFromString }}

[michrome]

I've run into this where I have a data file named _data/events-by-date.js and in my Nunjucks template I want something like:

{% for d in eventsByDate %}

I realise I could rename the file to _data/eventsByDate.js but that doesn't match the file naming conventions in use. Is there a way to specify the variable name in the data file rather than rely on its file name?

[binyamin]

@michrome can you open a new issue, please?

[zachleat]

I think a better way forward that what was documented here will be #1919