javascript - 使用knockout attr数据绑定(bind)来显示图标标签

Question

常规图标标签通常这样使用:

<i class="fa fa-cultery"></i>

但由于某种原因，我尝试将图标类名称存储在 viewModel 中，例如:

        self.interviewScheduleIconOptions = [
            "icon-chair",
            "icon-clock",
            "icon-dollar",
            "icon-monitor",
            "icon-star",
            "icon-subway",
        ];

并尝试做类似的事情

<i data-bind="attr: {class: $data}"></i>

在此之前，我尝试过测试

看看它是否适用于数据绑定(bind)。

图标没有出现，当我检查 HTML 时，它给了我:

<i data-bind="attr: {class: 'fa fa-cultery'}" class="fa fa-cultery"></i>

所以它给出了正确的类，但图标没有出现。

有什么想法吗？

Answer 1

请尝试<i data-bind="attr: {'class': $data}"></i>这意味着类周围的单引号

原因

因为，class不是合法的 JavaScript 变量名注意:应用名称不是合法 JavaScript 变量名称的属性

如果要应用属性data-something，不能这样写:

<div data-bind="attr: { data-something: someValue }">...</div>

…因为data-something此时不是合法的标识符名称。解决方案很简单:只需将标识符名称括在引号中，使其成为字符串文字，这在 JavaScript 对象文字中是合法的。例如，

<div data-bind="attr: { 'data-something': someValue }">...</div>