Using conditionnal formating with implicit iterator

[TommyTEnviroQc]

Hi!
I'm trying to display special charactors and space for rendering of a simple (top level) list, something like

"numbers": [ "1", "2", "3", "4" ...]

And in my rendering, I'm trying to assign / format the data so that if a certain number is present (the list is dynamic), it will display as "one", "two" ... instead of the current value.

I've tried numerous things, but I can't seem to find how to compare the current value to the desired output.
Is there a way to do something along the lines of:

{{#ifCond . '==' '1'}} blegh {{/ifCond}}

Thank you!!

[jgonggrijp]

Thank you for reaching out @TommyTEnviroQc, and welcome to the discussions. I moved your question here, because we reserve the issue tracker for discussing concrete issues regarding the test files.

There is currently no way to compare context values to literal values, especially not right from the template. I will discuss a few other ways in which you could still get the result you want.

Option 1

You are essentially taking a value from the context and then formatting it in a way that is different from what the host programming language would do by default. This is one of the main use cases for which filter syntax (#153) has been proposed. Filters are a nonstandard extension to the language (at least for now), but there are multiple Mustache engines that implement them anyway and their implementations tend to be somewhat compatible, so you might still be able to use them.

It starts with defining a simple function in the host language that takes the context value and returns the formatted value. Here's what that might look like in JavaScript:

// Permanent helper object
var numberNames = {
    '1': 'one',
    '2': 'two',
    '3': 'three',
    ...
};

// The formatting function
function number2word(number) {
    return numberNames[number];
}

Next, in the data that you pass to the template, you include the formatting function along with the data to format.

{
    "numbers": [ "1", "2", "3", "4" ...],
    numAsWord: number2word,
}

Finally, in the template, you pass context values to formatting functions by writing them with a pipe in between. You can use this both in interpolation tags and section tags.

{{#numbers}}
{{ . | numAsWord }}
{{/numbers}}

Option 2

Some Mustache engines provide more exotic extensions to the Mustache language, which might let you achieve the same effect entirely from the template alone. It highly depends on the engine whether there is such a feature available and what the syntax will look like. If you use such syntax, your template will not be portable to other engines. I cannot recommend this route, but I mention it for completeness because it does exist.

Option 3

Any time the Mustache language does not provide built-in functionality for what you want to do, the catch-all solution is to preprocess the data so that it already contains what you want to render. While this can be inconvenient, there is also an advantage to preprocessing: by moving some responsibilities to the host language, the template language can stay lean. It is an explicit goal of Mustache to be minimalistic.

The number2word function that I defined for option 1 can also be used for preprocessing. In the simplest case, we map that function over our numbers array and we pass the result to the template instead of the original array:

{
    "numbers": [ "1", "2", "3", "4" ...].map(number2word)
}

{{#numbers}}
{{ . }}
{{/numbers}}

You can try this out in the playground by pasting the following code into the load/store box:

{"data":{"text":"function() {\n    var numberNames = {\n        '1': 'one',\n        '2': 'two',\n        '3': 'three',\n        '4': 'four',\n        '5': 'five',\n    };\n\n    function number2word(number) {\n        return numberNames[number];\n    }\n\n    return {\n        numbers: [1, 2, 3, 4, 5].map(number2word)\n    }\n}()"},"templates":[{"name":"example1","text":"{{#numbers}}\n{{ . }}\n{{/numbers}}"}]}

If you want to retain the option to render the original, non-formatted number as well, simply replace each item in the array by an object that has both versions of the value:

function number2object(number) {
    return {
        number: number,
        text: numberNames[number],
    };
}

{
    numbers: [1, 2, 3, 4, 5].map(number2object)
}

{{#numbers}}
{{ number }}: {{ text }}
{{/numbers}}

Playground savestate:

{"data":{"text":"function() {\n    var numberNames = {\n        '1': 'one',\n        '2': 'two',\n        '3': 'three',\n        '4': 'four',\n        '5': 'five',\n    };\n\n    function number2object(number) {\n        return {\n            number: number,\n            text: numberNames[number],\n        };\n    }\n\n    return {\n        numbers: [1, 2, 3, 4, 5].map(number2object)\n    }\n}()"},"templates":[{"name":"example1","text":"{{#numbers}}\n{{ number }}: {{ text }}\n{{/numbers}}"}]}

I hope this helps!