jsrender - 如何为 JsViews 保留帮助函数生成的 HTML 标记

Question

在 JsRender[1] 中，我有自定义标签 {{tag data /}} 来生成我的页面的一部分。根据http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html也可以使用 {{:value}} 从 value 呈现 HTML。

但是在 JsViews[2] 中，如果我的转换函数生成 HTML 标记（比如：

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

conv 在哪里生成 HTML 标签

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

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

提前致谢！

score 2 · Accepted Answer

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

但是，您可以设置不同的目标“属性”并编写，例如，

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

title以的属性为目标div，或

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

以定位背景颜色样式。

对于您的场景，您可以编写

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

以innerHTML. 这样，您的数据或转换器或辅助输出可以作为 HTML 元素插入到 DOM 中。（当然不太安全......）。

顺便说一句，您也可以添加转换器，如：

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

回到原点，如果您使用 html 编码器作为转换器，如下所示：

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

也可以写成缩写形式：

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

1 回答 1