How to keep helper function generated HTML tags for JsViews

Question

In JsRender[1] I have the custom tags {{tag data /}} to generate part of my page. According to http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html it is possible to use {{:value}} to render HTML from value too.

However in JsViews[2] where I need to put expressions in the data-link attribute of tag, if my conversion function generates HTML tags (say:

<div data-link="{:~conv(data)}" />

where conv generates HTML tags

function conv(data) { return '<b>' + data + '</b>'; }

), when inserted into the DOM the output is being filtered (i.e. output as "..." rather than bold). How can I disable this function in JsViews and let helper function generate markup for up-to-date data?

Thanks in advance!

[1] https://github.com/BorisMoore/jsrender
[2] https://github.com/BorisMoore/jsviews

BorisMoore BorisMoore · Accepted Answer · 2012-11-11T18:28:29

By default, data-link on an HTML element such as div (basically any element other than form elements like input or select) will have a default target of innerText, so HTML markup in the string will be rendered as markup, not inserted into the DOM as HTML elements. (Equivalent to HTML encoding by the browser.)

However you can set a different target 'attrib' and write, for example,

<div data-link="title{:~conv(data)}" />

to target the title property of the div, or

<div data-link="css-background-color{:~conv(data)}" />

to target the background color style.

For your scenario you can write

<div data-link="html{:~conv(data)}" />

to target innerHTML. That way your data or converter or helper output can be inserted into the DOM as HTML elements. (Less secure of course...).

BTW you can add converters too, as in:

<div data-link="html{myCnvt:~conv(data)}" />

To come full circle, if you use the html encoder as converter, as in:

<div data-link="html{html:~conv(data)}" />

which can also be writtne in the abbreviated form:

<div data-link="html{>~conv(data)}" /> then that will actually use innerHTML but will add HTML encoding before insertion.

How to keep helper function generated HTML tags for JsViews

1 Answers