How do I format a Mustache conditional inside string for Mustache HTML rendering?

Question

I have an HTML string that I would like rendered as HTML in Mustache. However, that string also contains a Mustache conditional. When I inspect the rendered HTML in Chrome Dev Tools, it seems that the conditional is literally being printed inside the input element, instead of being handled. I think it might be a problem with the forward slash in the closing brackets. In Chrome Dev Tools, the / is removed upon rendering. So I tried using the HTML decimal code. That also did not work.

This is where I am rendering the HTML string:

<span>{{{response.additionalInfo}}}</span>

This is the object I am passing to the view. The additionalInfo property is the one that has the embedded Mustache conditionals:

var response = {
                templateType: "optIn",
                header: "Opt-In",
                additionalInfo: "<label><input type='checkbox' id='notOptIn' name='isOptIn' {{^response.isOptIn}}checked{{/response.isOptIn}}> YES</label>",
                isOptIn: false,
}

Is it possible to add a Mustache conditional inside a string that Mustache will render as HTML? If so, how do I escape the / in the ending tags?

Answer 1

I didn't manage to make it work with a single call to Mustache.

For what it's worth, I managed to make it work by converting the template in response.additionalInfo and storing the result in response.additionalInfo .

Then I converted the template you provided.

With isOptIn = false :

 var response = { templateType: "optIn", header: "Opt-In", additionalInfo: "<label><input type='checkbox' id='notOptIn' name='isOptIn' {{^response.isOptIn}}checked{{/response.isOptIn}}> YES</label>", isOptIn: false, } var template = "<span>{{{response.additionalInfo}}}</span>"; document.getElementById("run").addEventListener("click", function() { response.additionalInfo = Mustache.to_html(response.additionalInfo, window); html = Mustache.to_html(template, window); document.getElementById("container").innerHTML = html; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script> <script src="https://mustache.github.io/extras/mustache.js"></script> <button id="run">Run</button> <div id="container"/> 

With isOptIn = true :

 var response = { templateType: "optIn", header: "Opt-In", additionalInfo: "<label><input type='checkbox' id='notOptIn' name='isOptIn' {{^response.isOptIn}}checked{{/response.isOptIn}}> YES</label>", isOptIn: true, } var template = "<span>{{{response.additionalInfo}}}</span>"; document.getElementById("run").addEventListener("click", function() { response.additionalInfo = Mustache.to_html(response.additionalInfo, window); html = Mustache.to_html(template, window); document.getElementById("container").innerHTML = html; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script> <script src="https://mustache.github.io/extras/mustache.js"></script> <button id="run">Run</button> <div id="container"/>