如何保留辅助函数为JsViews生成的HTML标签 [英] How to keep helper function generated HTML tags for JsViews
问题描述
在JsRender [1]中，我具有自定义标签{{tag data/}}以生成页面的一部分.根据 http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html ，也可以使用{{:value}}从值呈现HTML.
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.
但是在JsViews [2]中，如果我的转换函数生成HTML标签，则需要将表达式放在tag的data-link属性中(例如:
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)}" />
conv在其中生成HTML标记
where conv generates HTML tags
function conv(data) { return '<b>' + data + '</b>'; }
)，当将其插入DOM时，将对输出进行过滤(即，输出为" ... "而不是粗体).如何在JsViews中禁用此功能，并让助手功能为最新数据生成标记?
), 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?
提前谢谢！
[1] https://github.com/BorisMoore/jsrender
[2] https://github.com/BorisMoore/jsviews
[1] https://github.com/BorisMoore/jsrender
[2] https://github.com/BorisMoore/jsviews
推荐答案
默认情况下，HTML元素(如div)(基本上是除input或select之类的表单元素之外的任何其他元素)上的数据链接的默认目标为innerText，因此字符串中的HTML标记将呈现为标记，而不是作为HTML元素插入到DOM中. (等效于浏览器的HTML编码.)
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.)
但是，您可以设置其他目标"attrib"并编写例如
However you can set a different target 'attrib' and write, for example,
<div data-link="title{:~conv(data)}" />
<div data-link="title{:~conv(data)}" />
定位div或
<div data-link="css-background-color{:~conv(data)}" />
<div data-link="css-background-color{:~conv(data)}" />
定位背景颜色样式.
对于您的情况，您可以编写
For your scenario you can write
<div data-link="html{:~conv(data)}" />
<div data-link="html{:~conv(data)}" />
定位到innerHTML.这样，您的数据，转换器或辅助输出可以作为HTML元素插入到DOM中. (当然不太安全...).
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)}" />
<div data-link="html{myCnvt:~conv(data)}" />
如果您使用html编码器作为转换器，则可以圈出一个完整的圆圈，如下所示:
To come full circle, if you use the html encoder as converter, as in:
<div data-link="html{html:~conv(data)}" />
<div data-link="html{html:~conv(data)}" />
也可以用缩写形式写成
<div data-link="html{>~conv(data)}" />
那么它实际上会使用innerHTML，但是会在插入之前添加HTML编码.
<div data-link="html{>~conv(data)}" />
then that will actually use innerHTML but will add HTML encoding before insertion.
这篇关于如何保留辅助函数为JsViews生成的HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
