如何为JsViews保留helper函数生成的HTML标记

Question

在JsRender [1]中，我有自定义标记{{tag data /}}来生成我页面的一部分。根据{{​​3}}，可以使用{{：value}}从值中呈现HTML。

然而在JsViews [2]中我需要将表达式放在tag的data-link属性中，如果我的转换函数生成HTML标签（比如：

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

其中conv生成HTML标记

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

），当插入DOM时，输出被过滤（即输出为“ ... ”而不是粗体）。如何在JsViews中禁用此功能并让helper函数为最新数据生成标记？

提前致谢！

[1] http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html
[2] https://github.com/BorisMoore/jsrender

Answer 1

默认情况下，div等HTML元素上的数据链接（基本上除了input或select等表单元素之外的任何元素）的默认目标为{{1因此，字符串中的HTML标记将呈现为标记，而不是作为HTML元素插入到DOM中。 （相当于浏览器的HTML编码。）

但是，您可以设置不同的目标'attrib'并写入，例如

innerText

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

的title属性

div

定位背景颜色样式。

对于您的方案，您可以写

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

定位 <div data-link="html{:~conv(data)}" /> 。这样，您的数据或转换器或帮助器输出可以作为HTML元素插入到DOM中。 （当然不太安全......）。

BTW你也可以添加转换器，如：

innerHTML

如果您使用html编码器作为转换器，请完整循环，如：

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

也可以缩写形式写成：

<div data-link="html{html:~conv(data)}" /> 那么实际上会使用 <div data-link="html{>~conv(data)}" /> ，但会在插入之前添加HTML编码。