通过JavaScript传递HTML

Question

目标

使用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时,它将呈现为字符串而不是vanilla HTML.

容纳nameWithCnpj(使用KnockoutJS)的容器如下:

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

所以我问:我如何教JavaScript(或HTML)nameWithCnpj变量应该是DOM元素而不是简单的字符串？

Answer 1

您需要使用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>