1

我的应用程序中有一个部分，我想在其中显示通过图标字体生成的动态图标。这是我尝试使用的标记（基于我在多个地方看到的使用图标字体的模式）：

<span data-bind="attr: {'data-icon': iconCode}"></span>

这是我适用的相关CSS：

[data-icon]:before {
    font-family: 'Icons';
    content: attr(data-icon);
}

当我将iconCodeobservable 设置为代表我想要的图标的代码时（即，"&#xe000"我在这里留下的末尾有一个分号），它会显示文本字符串并且不会将其转换为字符。如果我使用开发工具手动编辑data-icon标签的属性，它会正确显示图标，所以我知道我的标记或 CSS 没有任何问题。

我认为一定有一些东西阻止浏览器能够处理这样的动态插入的字符。我正在使用一组足够小的图标，为每个图标创建一个 CSS 类并动态应用类名并不是什么大不了的事，但我宁愿有一个模式，让我可以灵活地使用任何我想要的角色。有什么建议么？

4

1 回答 1

1

您可以使用 DOM 将 HTML 转义序列转换为实际字符：

function ViewModel() {
    var self = this;

    self.iconCode = ko.observable();

    self.iconCodeChar = ko.computed(function () {
        var div = document.createElement("DIV");
        div.innerHTML = self.iconCode();
        return div.textContent || div.innerText;
    });
}

并绑定到计算的 observable：

<span data-bind="attr: {'data-icon': iconCodeChar}"></span>

当心通过使用.innerHTML. 可能需要进行某种输入值检查。

于 2013-02-14T15:16:44.633 回答