敲除绑定 fontawesome class

Question

你好，

我在将 font-awesome CSS class 绑定到标签时遇到问题。

HTML:

    <div class="flex-no-shrink">
        <div class="btn-group">
            <div data-bind="foreach: toolbarButtons">
                <button type="button" class="btn btn-xs btn-primary" data-bind="enable: enabled, visible: visible, click: onClick">
                   <i class="fa" data-bind="css: { class: icon }"></i>
                    <!-- <i class="fa fa-plus"></i> -->
                </button>
                  <button type="button" class="btn btn-xs btn-primary" data-bind="enable: enabled, visible: visible, click: onClick">
                     <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </div>

TS:

interface IToolbarButton {
    enabled: KnockoutComputed<boolean>;
    visible: KnockoutComputed<boolean>;
    icon: string;
    onClick();
}

export abstract class ViewModel {
       toolbarButtons: IToolbarButton[];

   constructor(){
   this.loadDefaultToolbar();
   }
   loadDefaultToolbar(): void {
        this.toolbarButtons = [];
        //add button
        this.toolbarButtons.push({
            enabled: knockout.pureComputed(() => true/*some internal logic*/),
            icon: 'fa fa-plus',//this is what I want to place inside <i> tag
            onClick: () => {/*some internal logic*/},
            visible: knockout.pureComputed(() => true/*some internal logic*/)
        });
        //other default buttons...
        }
};

ko.applyBindings(new ViewModel());

我的情况下正确的绑定方式是什么？

Exmaple of posted code

我试过像 text 或 css 这样的基础绑定：{ icon } 但它们现在也可以工作了。

感谢您的宝贵时间和帮助

Answer 1

css绑定有两种形式：

接受一个对象 classes 作为属性名称和值作为布尔表达式：
```
css: {className: booleanExpression}
```
...其中 className 是要包括的 class 的名称，如果 booleanExpression 为真（如果 booleanExpression 为假，它将被忽略）。
一个让您指定 class 名称作为字符串包括在内：
```
css: stringExpression
```

您尝试过将这两种语法结合起来；你想要第二个。与（误）使用 attr 绑定不同，这尊重添加到元素的其他 classes。 css 绑定的这个特性是 documented here and can be found in the source here.

实例：

ko.applyBindings({
  someClassName: "two",
})

.one { background: yellow; }
.two { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="one" data-bind="css: someClassName">
  My type is red because the view model added a class name!
</div>

如果您想 see/compare 更多示例，请发表评论。

敲除绑定 fontawesome class

Knockout binding fontawesome class

data-binding

knockout.js

javascript-databinding

typescript

knockout-3.4