Handlebars helpers for VJ

handlebars-helpers.md

Handlebars helpers

We'll see some example "helpers" which access the vocabs, without needing lookup, or passing in @root.vocab.

Lets use the following vocabs:

key	english
country_names_1	England
country_names_2	Scotland
country_names_3	Wales
country_names_4	Northern Ireland

And let's see the helpers we can use to access its data:

vocab - get value of given key

the HTML:

<p>{{vocab 'country_names_1'}}</p> <!-- England -->
<p>{{vocab 'country_names_2'}}</p> <!-- Scotland -->

the helper:

const vocab = (key, options) => {
    const { vocab } = options.data.root;

    return vocab[key];
};

module.exports = vocab;

vocab-keys - get keys matching given pattern

the HTML:

{{#each (vocab-keys 'country_names_') as |key|}}
    <p>{{key}}</p> <!-- country_names_1, country_names_2, etc -->
{{/each}}

the helper:

const vocabKeys = (pattern, options) => {
    const { vocab } = options.data.root;
    const keys = Object.keys(vocab).filter(key => (key.includes(pattern)));

    return keys;
};

module.exports = vocabKeys;

vocab-values - get values matching given pattern

the HTML

{{#each (vocab-values 'country_names_') as |value|}}
    <p>{{value}}</p> <!-- England, Scotland, etc -->
{{/each}}

the helper:

const vocabValues = (pattern, options) => {
    const { vocab } = options.data.root;
    const keys = Object.keys(vocab).filter(key => (key.includes(pattern)));

    let values = [];
    keys.forEach(key => {
        values.push(vocab[key]);
    });

    return values;
};

module.exports = vocabValues;

vocabs - get keys and values matching given pattern

the HTML

{{#each (vocabs 'country_names_') as |value|}}
    <p>{{@key}}: {{value}}</p>      <!--  country_names_1: England,   etc -->
{{/each}}

the helper

const vocabs = (pattern, options) => {
    const { vocab } = options.data.root;
    const keys = Object.keys(vocab).filter(key => (key.includes(pattern)));

    let obj = {};
    keys.forEach(key => {
        obj[key] = vocab[key];
    });

    return obj;
};

module.exports = vocabs;

assign - set handlebars variables

the HTML

{{assign 'countries' (vocabs 'country_names_')}}

{{#each countries as |value|}}
    <p>{{@key}}: {{value}}</p>       <!--  country_names_1: England,   etc -->
{{/each}}

the helper

const assign = (varName, varValue, options) => {
    if (!options.data.root) {
        throw Error('options.data.root does not exist');
    }
    options.data.root[varName] = varValue;
}

module.exports = assign;

assetPath - quick creation of cache-busted asset paths

the HTML

{{assetPath '/img/foo.png'}}    <!-- creates full URL, cache-busted by project version and timestamp -->

the helper:

const assetPath = (concat, options) => {
    return options.data.root.assetsPath + concat + '?ticker=' + options.data.root.version + Date.now();
}

module.exports = assetPath;