你好
我将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());
在地雷中束缚的正确方法是什么?
我尝试了诸如文本之类的基本绑定,或者只是 css:{icon} ,但它们现在也可以工作。
感谢您的时间和帮助
答案 0 :(得分:2)
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>
如果您想查看/比较更多示例,请发表评论。