css binding only updating when clicking somewhere else on the screen

Question

I have a problem where i have a button group with a number of buttons and want to change the button active state of each button independently. I am using the following code for the buttons:

<button type="button" data-bind="click: function () { myModel.appointment().SMSAppointment(!myModel.appointment().SMSAppointment())}, css: { active: myModel.appointment().SMSAppointment() == true }" class="btn btn-default btn-xs">Appointment</button>

I have some strange behaviour with knockout in this respect. The css class "active" is not being updated until i click somewhere on the screen, it then updates the css value properly.

Any help would be appreciated.

Update: when the button is not active (no active css) and i click on it the "active" css is added correctly, it seems to not update correctly when removing the CSS... (second click when trying to deactive it or when starting off with active state)

Update2: Just added a jsFiddle for behavior http://jsfiddle.net/ganymede/xub3j/2/ Thanks

Answer 1

The bootstrap style for active is based on selection. So it looks like the button is still focused, and that's why it looks like its still active. Try making it like so:

<button type="button" data-bind="click: function () { SMSAppointment(!SMSAppointment());}, css: { active: SMSAppointment() == true }, hasFocus: SMSAppointment()" class="btn btn-default btn-xs">Appointment</button> 

Now the bootstrap style for focus is working correctly as well.

http://jsfiddle.net/XCgvV/

Edit:

This is an example of how to deal with the bootsrap focus issue. Though I don't think it's actually what you want. So you can probably do things like clear focus after its been clicked and things like that. Or override the css altogether.

Answer 2

Actually, your CSS binding is working just fine.

http://jsfiddle.net/xub3j/3/

I rewrote your code slightly to move the click function to the viewmodel so it was easier to fiddle with it, but this didn't change any functionality. I rewrote it like this:

self.toggleActive = function () {
    self.SMSAppointment(!self.SMSAppointment());
};

So then I went to inspect what happens in the CSS. The problem is in de the default 'btn' class. I removed all the classes from the button, and made the active effect very obvious (I changed the color to red). Now you can see clearly it's working just fine.