How can I handle conditional comments in a ractive mustache template?

Question

I am having and issue using express and ractive to render mustache templates. My actual code looks something like this:

<li class="header-link"><a href="fakehome.com">HOME</a></li>
<li class="header-link">
  <!--[if !IE]><a href="{{url('browse')}}">BROWSE</a><![endif]-->
  <!--[if IE]><a href="{{url('ie_browse')}}">BROWSE</a><![endif]-->
</li>

But when the page renders it does not include the conditional [if IE] blocks. I think it may be interpreting them as comments. Anyways I need a way to modify which links I use for compatibility with IE. If there is another way to do this I would happily accept it, but I was somewhat surprised this did not render at all.

Answer 1

You can fake it with triple mustaches:

<li class="header-link">
  {{{ifnotie}}}<a href="{{url('browse')}}">BROWSE</a>{{{ifend}}}
  {{{ifie}}}<a href="{{url('ie_browse')}}">BROWSE</a>{{{ifend}}}
</li>

and constants in your data:

data: {
    ifie: '<!--[if IE]>',
    ifnotie: '<!--[if !IE]>', 
    ifend: '<![endif]-->',
    url: function(input) { return input }
}

and:

console.log(ractive.toHTML())
//yields:
<li class="header-link"><!--[if !IE]><a href="browse">BROWSE</a><![endif]--> <!--[if IE]><a href="ie_browse">BROWSE</a><![endif]--></li>