Greater than or less than symbol is not displayed in templates.

[Shanmugaraja K]

I'm facing issue with greater than and less than symbols, i have created template for table and generate with the value of <less than. But it was considered as a new tag not a text. Here is my code sample,

while (i < 10) {
htmlStr += "<td > <less than </td>";
i++;
}
templates["obj"] = htmlStr + "</tr>";
$.templates(templates);
$("#TemplateData").append($.render["obj"]([{},{}]));

JS Fiddle: https://jsfiddle.net/z8fqs1yb/7/

Is it possible to display a value with < or > symbols ?

[Boris Moore]

Your problem is not with JsRender - which is rendering what you ask it to. You can rewrite as:

var html = $.render["obj"]([{},{}]);
$("#TemplateData").append(html);

The problem is simply with inserting invalid HTML, on the second line. The browser will try to guess what you mean.

You probably want to write:

htmlStr += "<td > &lt;less than </td>";

https://developer.mozilla.org/en-US/docs/Glossary/Entity
https://www.w3schools.com/html/html_entities.asp

You can also use

htmlStr += "<td >  {{>'<'}} than </td>";

http://www.jsviews.com/#htmltag

[Boris Moore]

You can also do

var escapeHtml = $.views.converters.html;
var i = 0, htmlStr =  "<tr style = 'height: 10px'>" , templates = {obj:""};
  while (i < 10) {
    htmlStr += "<td >" + escapeHtml('<less than ') + "</td>";
       i++;
    }
    ...

https://jsfiddle.net/BorisMoore/z8fqs1yb/8/

[Boris Moore]

I think this can be closed...