Question

我遇到一个问题，我有一个按钮组，其中包含多个按钮，并希望独立更改每个按钮的按钮活动状态。我使用以下代码作为按钮：

<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：刚为行为http://jsfiddle.net/ganymede/xub3j/2/添加了一个jsFiddle 感谢

Answer 1

活动的引导样式基于选择。因此看起来按钮仍然是聚焦的，这就是它看起来仍然活跃的原因。尝试这样做：

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

现在焦点的引导样式也正常工作。

http://jsfiddle.net/XCgvV/

编辑：

这是一个如何处理bootsrap焦点问题的示例。虽然我不认为它实际上是你想要的。所以你可以做一些事情，比如点击之后的清晰焦点等等。或者完全覆盖css。

Answer 2

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

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

我稍微重写了你的代码以将click函数移动到viewmodel，因此更容易摆弄它，但这并没有改变任何功能。我把它改写成这样：

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

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

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

2 个答案: