0

发布代码示例

你好，

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

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

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

发布代码示例

我尝试了像text或css: { icon }这样的基本绑定，但它们现在也可以工作了。

感谢您的时间和帮助

4

1 回答 1

2

css绑定有两种形式：

  1. 一种接受对象，其中类作为属性名称，值作为布尔表达式：

    css: {className: booleanExpression}

    ...className如果为真，则要包含的类的名称在哪里（如果为假booleanExpression，它将被忽略）。booleanExpression

  2. 一种允许您指定要包含为字符串的类名：

    css: stringExpression

您已经尝试将这两种语法结合起来；你想要第二个。与（错误）使用attr绑定不同，这尊重添加到元素的其他类。css绑定的此功能在此处进行了记录，并且可以在此处的源代码中找到。

现场示例：

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>

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

于 2018-08-07T09:20:34.527 回答