Question

你好

我将font-awesome的CSS类绑定到标签中时遇到问题。

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

我尝试了诸如文本之类的基本绑定，或者只是 css：{icon} ，但它们现在也可以工作。

感谢您的时间和帮助

Answer 1

css绑定具有两种形式：

接受一个对象，该对象的类为属性名，值作为布尔表达式：
```
css: {className: booleanExpression}
```
......，其中className是booleanExpression为true时要包括的类的名称（如果booleanExpression为false则将被忽略）。
一个可让您指定要包含为字符串的类名称：
```
css: stringExpression
```

您已经尝试过将两种语法结合起来；你想要第二个。与（mis）使用attr绑定不同，这尊重添加到元素的其他类。 css绑定的此功能为documented here，可以在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>

如果您想查看/比较更多示例，请发表评论。

淘汰赛绑定字体类

1 个答案: