在jsView中使用html转换器在语法上是错误的:data-link=“html{:p roperty}”而不是dat

Is it syntactically wrong to use the html converter in jsView like so: data-link="html{:property}" instead of data-link="{html:property}"?

本文关键字：html dat roperty jsView 转换器 错误 语法 data-link      更新时间：2023-09-26

我们在很多在jsViews/jsRender中呈现的模板上使用html转换器。我们遇到了一个问题，当
标签位于它呈现的文本中时，jsViews 正在摸索"不匹配"错误。直到最近更新到最新版本，我们才注意到这一点。她是我们最初使用的片段，现在导致错误：

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

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

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

我的问题是：它以前没有正确设置，我们只是从未注意到错误，这在最新版本上是否发生了变化，后一种方式是使用 html 编码器的唯一正确方法吗？ 任何帮助将不胜感激。谢谢！

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

特别请参阅完整语法部分 - 多个目标，多个标签，多个绑定...其中说：

完整的语法允许您将多个表达式绑定到不同的目标"attrib"，并且编写如下：data-link="attrib1{linkExpression1} attrib2{linkExpression2} ..."

并注意它下面说的内容：

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

它给出了一些例子：

  • <div data-link="{:name}"></div>（单向绑定到 innerText - 默认目标属性 - 因此自动进行 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 对类似问题的回答 如何保留帮助程序函数生成的 JsViews HTML 标记

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

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

  {html:property}    ---> encoding
  html{:property}    --->   use innerHTML at target
  html{html:property}  --->  This fixed our problem, and was the solution we needed.
相关文章：