2

目标

使用 HTML 传递给 DOM 字符串并渲染它。

场景

我正在使用以下语法扩展 observable（使用 KnockoutJS）的属性：

self.showDetails.subscribe(function (context) {
    var details = this.showDetails();
    details.nameWithCnpj = context.name() + " <small>" + context.cnpj() + "</small>";
}, this);

如果您注意以下行，您可以看到上面的 HTML：

details.nameWithCnpj = context.name() + " <small>" + context.cnpj() + "</small>";

当<small></small>标签到达 HTML 时，它被呈现为字符串而不是普通 HTML。

容纳nameWithCnpj（使用 KnockoutJS）的容器如下：

<h2 class="bold float-left" data-bind="text: nameWithCnpj"></h2>

所以我问：我怎样才能教给 JavaScript（或 HTML）nameWithCnpj变量应该是一个 DOM 元素而不是一个简单的字符串？

4

1 回答 1

5

您需要使用html绑定而不是text：

html 绑定使关联的 DOM 元素显示您的参数指定的 HTML。

通常，当您的视图模型中的值实际上是您要呈现的 HTML 标记字符串时，这很有用。

因此，将您的视图更改为：

<h2 class="bold float-left" data-bind="html: nameWithCnpj"></h2>

如果你想成为更多的 MVVM，你可以创建一个模板来封装你的格式化逻辑并使用 template绑定：

<h2 class="bold float-left" 
    data-bind="template: { name: 'nameWithCnpj', data: showDetails}"></h2>

<script id="nameWithCnpj" type="text/html">
   <span data-bind="text: name"></span>
   <small data-bind="text: cpnj"></small>
</script>
于 2013-08-29T13:04:33.763 回答