敲除将字体真棒图标绑定到属性

Question

我正在尝试显示基于属性的超赞字体图标，同时循环遍历一个可观察数组。

当前代码：

<tbody data-bind="foreach: TimeToPutAwaySummary">
    <tr class="noOfPeopleRequiredRow">
        <td data-bind="text: $data.IsOptimumNoOfPeople ? '***' + $data.NoOfPeopleRequiredText + '***' : $data.NoOfPeopleRequiredText">
        </td>
        <td style="text-align: right" data-bind="text: $data.Time"></td>
    </tr>
</tbody>

当前的工作方式是输出：

1 Person Required
*** 2 Person Required ***
3 Person Required
4 Person Required
5 Person Required

但是，我想显示一个很棒的字体图标而不是“***”，即类似这样的东西：

1 Person Required
(font awesome icon) 2 Person Required
3 Person Required
4 Person Required
5 Person Required

我尝试了以下方法，但没有显示图标：

<tbody data-bind="foreach: TimeToPutAwaySummary">
    <tr class="noOfPeopleRequiredRow">
        <td data-bind="text: $data.IsOptimumNoOfPeople ? '***' + $data.NoOfPeopleRequiredText + '***' : $data.NoOfPeopleRequiredText">
            <span data-bind="visible: IsOptimumNoOfPeople"><i class="fa fa-spinner" aria-hidden="true"></i></span>
        </td>
        <td style="text-align: right" data-bind="text: $data.Time"></td>
    </tr>
</tbody>

我还尝试用 p 标签替换 span 标签。

Answer 1

您在 td 上使用 <td data-bind="text: $data....>，这将覆盖元素内的所有内容，因此您的 icon-span-tag 将被忽略并删除。尝试将数据绑定从你的 td 移开，就像下面的 copy/paste 代码：

<td>
 <span data-bind="text: $data.IsOptimumNoOfPeople ? '***' + $data.NoOfPeopleRequiredText + '***' : $data.NoOfPeopleRequiredText"></span>
 <span data-bind="visible: IsOptimumNoOfPeople"><i class="fa fa-spinner" aria-hidden="true"></i></span>
</td>

或者更好的是删除 td 上的数据绑定，因为它将被替换为超棒的字体图标。:)

敲除将字体真棒图标绑定到属性

Knockout binding a font awesome icon to a property

data-binding

knockout.js

敲除将字体真棒图标绑定到 属性

Knockout binding a font awesome icon to a property

data-binding

knockout.js

敲除将字体真棒图标绑定到属性