通过 knockoutjs 将 HTML 标记属性设置为包含 HTML 实体的值

Question

如何通过 knockoutjs 设置 HTML 标签的 title 属性，以使标签内容中的任何 HTML 实体都被评估和显示（即不转义）？

例子：

<div data-bind="attr: { title: titleObservable }"></div>

在上面的例子中，如果 titleObservable 包含一个 HTML 实体，它不会被渲染，而是显示实体名称。有关工作示例，请参阅此 fiddle。请注意，当您将鼠标悬停在 div 上时，标题文本包含 ' 而不是撇号。

我知道在使用 knockoutjs 文本绑定设置 HTML 标记的内容时，出于安全原因，HTML 会被转义（请参阅this thread）。我假设这是我的标题属性中的实体发生的情况。我也知道我可以将撇号直接嵌入到 title 属性中，但我想知道是否有一种方法可以使用 HTML 实体执行此操作（由于我正在处理的项目存在某些限制）。

Answer 1

在 Javascript（Knockout 绑定使用）中使用 HTML 实体的唯一方法是通过innerHTML。对 DOM 的所有其他访问都使用 UTF-8 文本。

我建议您更新代码以在模型中使用纯文本，并且仅在实际 HTML 文档中使用 HTML 实体。但是，如果您不能这样做，您可以使用自定义绑定处理程序，在设置 DOM 属性之前将其从 HTML 转换为文本。这是我刚刚制作的一个设置标题。

ko.bindingHandlers.myTitle = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var d = document.createElement('div');
        d.innerHTML = value;
        element.title = d.innerText;
    }
};

示例：http://jsfiddle.net/mbest/TMSHB/2/