敲除编码的 html 绑定答案

【问题标题】：Knockout encoded html binding敲除编码的 html 绑定
【发布时间】：2014-08-15 12:05:42
【问题描述】：

如何使用 html 绑定呈现处于编码状态的 html？目前就我所拥有的，它只是给了我文本而不是呈现的 html。 http://jsbin.com/wudopeseloya/1/edit

var ViewModel = function() {
    this.myHtml = "&lt;h1&gt;hello&lt;/h1&gt;";
};

ko.applyBindings(new ViewModel());

和

<div data-bind="html:myHtml"></div>

【问题讨论】：

标签： knockout.js

【解决方案1】：

首先确定要如何解码 html 字符串。这里列出了很多选项：HTML Entity Decode

假设您有一个名为 decodeEntities 的全局函数可用，您可以提供一个计算属性，该属性仅在 myHtml 上执行此解码。

var ViewModel = function() {
    this.myHtml = "&lt;h1&gt;hello&lt;/h1&gt;";
    this.decodedHtml = ko.computed(function(){
        return decodeEntities(this.myHtml);
    });
};

请注意，由于 myHtml 不是可观察的，因此 decodedHtml 将始终解析为相同的值并且永远不会触发更新（除非手动强制执行），无论您之后为 myHtml 分配什么值。

实现相同结果的替代方法是对 myHtml 内联解码或创建一个自定义绑定，在现场进行解码。

【讨论】：

正如您已经观察到的，this.myHtml 不是可观察的。因此，将 this.decodedHtml 设置为计算的 observable 是没有意义的。你也可以说this.decodedHtml = decodeEntities(this.myHtml);
@Hans 是的，这是正确的，我使用 decodeEntities 并在渲染 html 时内联使用它，这样我就不必创建另一个变量来保存解码值。 jsbin.com/wudopeseloya/3/edit 。也非常感谢你们提供的所有帮助。