0

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

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

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

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

我的问题是：之前是否设置不正确，我们只是从未注意到错误，最新版本是否发生了变化，后一种方式是使用 html 编码器的唯一正确方式吗？任何帮助是极大的赞赏。谢谢！

4

2 回答 2

1

这是解释数据链接元素的语法的文档主题：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 对类似问题的回复How to keep helper function generated HTML tags for JsViews

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

于 2013-10-23T06:03:35.097 回答
0

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

  {html:property}    ---> encoding

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

  html{html:property}  --->  This fixed our problem, and was the solution we needed.
于 2013-10-23T17:26:22.633 回答