通过JavaScript传递HTML

Passing HTML through JavaScript

本文关键字：HTML 传递 JavaScript 通过      更新时间：2023-09-26

目标

使用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元素而不是简单的字符串

您需要使用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>
相关文章：