Question

我们在很多在jsViews / jsRender中渲染的模板上使用html转换器。我们遇到了一个问题，当一个标签出现在正在渲染的文本中时，jsViews在“Mismatch”错误时遇到了麻烦。我们没有注意到这一点，直到最近更新到最新版本。她是我们最初使用的片段，现在导致错误：

    <div id="Resizable" data-link="html{:Text}"></div>

现在，我注意到在jsRender APi上，它表示要像下面那样处理标记，这样做时，它会正确呈现数据，根据需要对html内容进行编码。

        <div id="Resizable" data-link="{html:Text}"></div>

我的问题是：之前是否设置不正确，我们从未注意到错误，在最新版本上进行了此更改，并且后一种方式是使用html编码器的唯一正确方法吗？任何帮助是极大的赞赏。谢谢！

Answer 1

以下是解释数据链接元素语法的文档主题：http://www.jsviews.com/#linked-elem-syntax

请参阅 完整语法 - 多个目标，多个标记，多个绑定...... 部分，其中包含：

完整语法允许您将每个表达式绑定到不同的目标'attrib'，并且这样写成：data-link =“attrib1 {linkExpression1} attrib2 {linkExpression2} ...”

并注意下面说的内容：

大多数元素的默认目标是innerText，但对于输入和选择它是值。

它给出了一些例子：

<div data-link="{:name}"></div>（对innerText的单向绑定 - 默认目标attrib - 自动HTML编码）。
<div data-link="html{:name}"></div>（对innerHTML的单向绑定）

所以这就是说数据链接div的默认目标是 innerText - 这意味着如果你注入HTML标记，它将实际上是HTML编码标记'免费'。它不会将HTML标记作为内部HTML插入。

如果您添加HTML转换器，您可以像<div data-link="{>name}"></div>一样编写它 - 但是当您作为innerText插入时添加HTML编码不会改变用户看到的内容。（同一事物的替代语法将是您在<div data-link="{html:name}"></div>上面写的内容）。请参阅HTML转换器上的文档：http://www.jsviews.com/#html。

如果您想要作为内部HTML插入，那么您使用HTML目标，上面的第二个示例：<div data-link="html{:name}"></div>。

然后您可以在<div data-link="html{>name}"></div>中添加编码。

但更有可能使用默认的innerText目标，而不需要显式转换器。

另见此SO对类似问题的答复How to keep helper function generated HTML tags for JsViews

BTW - 不，这不应该在最新版本中改变行为。如果您看到行为发生了变化，您是否可以在JsViews GitHub项目中添加一个问题，理想情况下，jsfiddle会显示两个版本之间呈现不同的内容？

Answer 2

在鲍里斯的帮助下，查看文档后，答案很明确。它在语法上不正确，但以两种不同的方式使用。一个用于编码数据，另一个用于将值设置为innerHTML属性。

  {html:property}    ---> encoding

  html{:property}    --->   use innerHTML at target

  html{html:property}  --->  This fixed our problem, and was the solution we needed.

在jsView中使用html转换器在语法上是错误的：data-link =“html {：property}”而不是data-link =“{html：property}”？

2 个答案: