Hey there,
I'm currently facing an issue with binding a CSS class from font-awesome to an <i> tag.
Here's a snippet of the 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>
In the TypeScript:
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 where I want to insert the icon into the <i> tag
onClick: () => {/*some internal logic*/},
visible: knockout.pureComputed(() => true/*some internal logic*/)
});
//Add more default buttons...
}
};
ko.applyBindings(new ViewModel());
What would be the correct way to bind it in my case?
I've already tried basic bindings like text or simply css: { icon } but they didn't work. Any guidance would be greatly appreciated!
Thanks for taking the time to help 🙂