Question

I’m attempting to use mustache.js as a templating system for JSON data that I’m getting back from an external API. The trouble is that the JSON object has keys that begin with hashes and I’m not sure how to deal with them. Example of object (and a total simplification):

{
    "items": [
        "description": {
            "#cdata-section": "Description goes here"
        }
    ]
}

Mustache.js:

var template = '{{#items}}' +
                    '{{#description}}' +
                         '{{cdata-section}}' +
                    '{{/description}}' +
               '{{/items}}';

Obviously it won’t recognize cdata-section because that’s not the name of the key. I can’t use {{#cdata-section}} because the hash symbolizes conditionals or enumerables in Mustache.js. I can’t seem to escape it either, {{\#cdata-section}} matches nothing.

Is there a way around this? Or do I have to pre-process the JSON object?

Answer 1

Perhaps a better solution would be to modify mustache.js. The offending line seems to be on line 106 with the regex

this.otag + "(\\^|\\#)\\s*(.+)\\s*" + this.ctag

Which matches the opening tag, followed by a ^ or #, then any amount of space, then at least one character, then any amount of space.

I’m not the best at regex, but a suitable solution would be to follow the opening tag with an assertion that it cannot match {{\^ or {{\#:

this.otag + "(?!\\\\)(\\^|\\#)\\s*(.+)\\s*" + this.ctag

The quadruple backslashes get interpreted by javascript as \\ + \\ = \\, then by regex as \ + \ = \. I haven’t tested this, but it should work.

If it works for you, consider opening a pull request for your change at their GitHub repository

EDIT: I missed a spot: on line 152, it appears you need to add a similar assertion. I’ll leave that as an exercise to the reader.