2

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

例子:

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

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

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

4

1 回答 1

4

在 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/

于 2013-04-03T00:14:27.580 回答