采用淘汰赛ATTR数据绑定来显示图标<i>标签

Question

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

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

，但由于某种原因，我试图将图标类名称存储视图模型内，如：

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

，并试图在此之前做这样的事情

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

，我TRIE d进行测试

查看它是否适用于数据绑定。

图标没有出现，当我检查了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变量名

如果要应用属性数据的东西，你不能这样写：

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

...因为data-something在该点不是合法标识符名称。解决方案很简单：只需将标识符名称包含在引号中，以便它变成一个字符串文字，这在JavaScript对象文本中是合法的。例如，

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

Answer 2

您似乎指的是两种不同的font-awesome版本。类似fa fa-search属于FA 4.7.2。虽然像icon-search类属于version 3.2.1

可以使用css结合这是指用于CSS类。

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

字体-真棒4.7.2

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

 
ko.applyBindings(new Model());

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

字体-真棒3.2。1

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());

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