Greater than or less than symbol is not displayed in templates.
shanmudev opened this issue · comments
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 ?
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 > <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>";
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++;
}
...
I think this can be closed...