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>

在此之前，我试图测试

查看它是否与data-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>

Answer 2

你似乎指的是两种不同版本的字体 - 真棒。像fa fa-search这样的类属于FA 4.7.2。像icon-search这样的课程属于version 3.2.1

您可以使用旨在用于CSS类的css绑定。

<i data-bind="css: $root.class"></i>

Font-Awesome 4.7.2

＆＃13;

var Model = function() {
  var self= this;
  
  self.class= ko.observable( "fa fa-search");
}

ko.applyBindings(new Model());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i data-bind="css: $root.class"></i>

＆＃13;

Font-Awesome 3.2.1

＆＃13;

var Model = function() {
  var self= this;
  
  self.class= ko.observable( "icon-search");
  
  self.interviewScheduleIconOptions = ko.observableArray([
            "icon-chair",
            "icon-clock",
            "icon-dollar",
            "icon-monitor",
            "icon-star",
            "icon-subway",
        ]);
}

ko.applyBindings(new Model());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>

<i data-bind="css: $root.class"></i>

<span data-bind="foreach: interviewScheduleIconOptions">
  <br/>
  <span data-bind="text: ($index() + 1)"></span>
  <i data-bind="css: $data"></i>
</span>

＆＃13;

使用knockout attr数据绑定来显示图标<i>标签

2 个答案: