HTML tags are escaped with mustache templates in CanJS

Question

My requirement is that i need to display a set of options to the user. I have used mustache template to render the options using CanJS javascript framework.

The issue here is when i am trying to render a options like: Potato Rs. 12

The mustache template is escaping my HTML and it is displaying the value with HTML tags.

I have used {{{ }}} too in my template but it is not helping.

Please check the fiddle for the same.

http://jsfiddle.net/arvi87/22CU8/1/

My mustache Template:

{{#options}}
            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{display}}}</option>
 {{/options}}

My Sample Control where i am binding data to my template:

var frag = can.view('{{' +this.options.view+ '}}',{
        /*
           I am passing observe here which is escaping the HTML tags like:
               Cabbage <span>Price: Rs.12</span>
        */
        options: arrayObserver

        /*
           This is rendering properly. Not sure about what is the difference ?
               Cabbage Price: Rs.12
        */
        //options: array
    });

My options array:

var array = [{
        selected: true,
        display: "None"
    },{
        selected: false,
        display: "Tomato"
    },{
        selected: false,
        display: "Potato <span>Rs.10</span>"
    },{
        selected: false,
        display: 'Cabbage <span>Price: Rs.12</span>'
    }];
    arrayObserver = new can.Observe.List(array);

Any help would be great.

Thanks.

Answer 1

I would at all costs avoid attempting to add any type of DOM elements to your option elements because this is never guaranteed to work.

If you take a look at the spec for option tags, you'll find that the only content model accepted is either Empty or Text, meaning nothing or just text. CanJS sticks close to the spec, which is why it renders it just as straight text, because options only allow for text.

If you are stuck with spans and other HTML in some of your data and you can't get rid of them by any other means, I would recommend writing a helper function to strip HTML tags out of the text for you, something like...

can.Mustache.registerHelper('displayHelper', function(display) {
  var stripped = display().replace(/<[^>]*>/g, "");
  return stripped;
});

And modify your template to look like...

{{#options}}
  <option value="{{value}}" {{#selected}}selected{{/selected}}>
    {{{displayHelper display}}}
  </option>
{{/options}}