Knockout.js css绑定仅在单击屏幕上的其他位置时更新

我有一个问题，我有一个按钮组和一些按钮，并希望改变按钮的每个按钮的活动状态独立。 我对按钮使用以下代码：

<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>

预约

在这方面我有一些奇怪的行为。css类“active”在我单击屏幕上的某个地方之前不会被更新，然后它会正确地更新css值

任何帮助都将不胜感激

更新：当按钮处于非活动状态（无活动css）且我单击该按钮时，“活动”css被正确添加，删除css时它似乎无法正确更新。。。（尝试取消激活或以激活状态启动时，再次单击）

Update2:刚刚为行为添加了一个JSFIDLE

---

谢谢

实际上，您的CSS绑定工作得很好

我稍微重写了您的代码，将click函数移动到viewmodel，以便更容易处理它，但这并没有改变任何功能。我这样重写：

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

---

然后我去检查CSS中发生了什么。问题出在默认的“btn”类中。我删除了按钮中的所有类，并使活动效果非常明显（我将颜色更改为红色）。现在您可以清楚地看到它工作得很好。

实际上，您的CSS绑定工作得很好

我稍微重写了您的代码，将click函数移动到viewmodel，以便更容易处理它，但这并没有改变任何功能。我这样重写：

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

---

然后我去检查CSS中发生了什么。问题出在默认的“btn”类中。我删除了按钮中的所有类，并使活动效果非常明显（我将颜色更改为红色）。现在您可以清楚地看到它工作得很好。

实际上，您的CSS绑定工作得很好

我稍微重写了您的代码，将click函数移动到viewmodel，以便更容易处理它，但这并没有改变任何功能。我这样重写：

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

---

然后我去检查CSS中发生了什么。问题出在默认的“btn”类中。我删除了按钮中的所有类，并使活动效果非常明显（我将颜色更改为红色）。现在您可以清楚地看到它工作得很好。

实际上，您的CSS绑定工作得很好

我稍微重写了您的代码，将click函数移动到viewmodel，以便更容易处理它，但这并没有改变任何功能。我这样重写：

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

---

然后我去检查CSS中发生了什么。问题出在默认的“btn”类中。我删除了按钮中的所有类，并使活动效果非常明显（我将颜色更改为红色）。现在您可以清楚地看到它工作得很好。

active的引导样式基于选择。所以按钮看起来仍然是聚焦的，这就是为什么它看起来仍然是活动的。试着这样做：

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

预约

现在，focus的引导样式也正常工作

编辑：

---

这是一个如何处理bootsrap焦点问题的示例。虽然我不认为这是你真正想要的。所以你可以在点击后做一些像清晰聚焦之类的事情。或者完全覆盖css。

活动的引导样式基于选择。所以按钮看起来仍然是聚焦的，这就是为什么它看起来仍然是活动的。试着这样做：

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

预约

现在，focus的引导样式也正常工作

编辑：

---

这是一个如何处理bootsrap焦点问题的示例。虽然我不认为这是你真正想要的。所以你可以在点击后做一些像清晰聚焦之类的事情。或者完全覆盖css。

活动的引导样式基于选择。所以按钮看起来仍然是聚焦的，这就是为什么它看起来仍然是活动的。试着这样做：

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

预约

现在，focus的引导样式也正常工作

编辑：

---

这是一个如何处理bootsrap焦点问题的示例。虽然我不认为这是你真正想要的。所以你可以在点击后做一些像清晰聚焦之类的事情。或者完全覆盖css。

活动的引导样式基于选择。所以按钮看起来仍然是聚焦的，这就是为什么它看起来仍然是活动的。试着这样做：

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

预约

现在，focus的引导样式也正常工作

编辑：

---

---

这是一个如何处理bootsrap焦点问题的示例。虽然我不认为这是你真正想要的。所以你可以在点击后做一些像清晰聚焦之类的事情。或者完全覆盖css。

您确定必须单击屏幕上的某个位置，并且绑定完成处理不是巧合吗？例如，您可以设置style=“display:none”并使用数据绑定使其可见，以查看绑定完成处理所需的时间。是否可以发布更多的代码？@rwisch45:希望有更多的代码发布？只有一个可观察到的值，这些值在按钮中是自包含的，单击更改值，css更新。@lamecoder-这绝对不是偶然的。我可以坐在那里等30秒，直到我点击它不更新。你是否为按钮组使用CSS/javascript框架：Bootstrap、jqMobile等？你确定你必须点击屏幕上的某个地方，并且绑定完成处理不是巧合吗？例如，可以设置style=“display:none”并将数据绑定到mak