How to keep helper function generated HTML tags for JsViews

≡放荡痞女 提交于 2019-12-13 16:26:18

问题


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


回答1:


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.



来源:https://stackoverflow.com/questions/13328042/how-to-keep-helper-function-generated-html-tags-for-jsviews

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!