Javascript 如何使用knockoutJS设置用于悬停和聚焦的css类

我终于找到了一种方法，使jQueryUIButtonset能够使用knockout“工作”。 事实上，我一直在模仿它。添加所有默认类是一回事，但我不得不认为应该有一种更简单的方法来解决悬停和聚焦问题

我试过了，但没用。 不知何故，所有的类都被撤销了

HTML:

在这里拉小提琴：

---

我的问题：有没有一种设置css类“ui状态悬停”和“ui状态焦点”的方法比使用我的按钮单独方法更简单？

我认为最好的简化方法是将格式化按钮移动到模型中：

所以按钮得到了一个模型

FormatButton = function(data)
{
  var self = this;

   self.letter = ko.observable(data.Letter);

   //Styles for button group 
   self.isFirst = ko.observable(data.isFirst);
   self.isLast = ko.observable(data.isLast);
   self.isHovering = ko.observable(false);
   self.isSelected = ko.observable(false);

   self.mouseOver = function(){ self.isHovering(true);};
   self.mouseOut = function(){ self.isSelected(false); };
}

每个标题都有一些按钮

Title = function(data){
    var self = this;

    self.ID = data.ID;    
    self.name = ko.observable(data.name);

    self.buttons = ko.observableArray([
        new FormatButton( {isFirst: true, letter: 'B' }),
        new FormatButton( {letter: 'I'}),
        new FormatButton( {isLast: true, letter: 'U'})
    ]); 


    return self;
};

用于显示按钮的html可能会变成for循环

<!-- ko foreach: buttons -->
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : letter}, checked: isSelected" />
    <label 
    rule="button" aria-disabled="false"
    class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" 
    data-bind="attr: { 'for' : 'myBold'+ ID},
               hasFocus: $root.bIsSelected,
               event: { mouseover: $root.bMouseOver, mouseout: $root.bMouseOut },
               css: { 'ui-state-active' : isBold, 'ui-state-focus' : $root.bIsSelected(), 'ui-state-hover' : $root.bHovering(), 'ui-corner-left': isFirst, 'ui-corner-right': isRight }">
        <span class="ui-button-text" data-bind="text: letter"></span>
    </label>
<!-- /ko -->

Title = function(data){
    var self = this;

    self.ID = data.ID;    
    self.name = ko.observable(data.name);

    self.buttons = ko.observableArray([
        new FormatButton( {isFirst: true, letter: 'B' }),
        new FormatButton( {letter: 'I'}),
        new FormatButton( {isLast: true, letter: 'U'})
    ]); 


    return self;
};

<!-- ko foreach: buttons -->
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : letter}, checked: isSelected" />
    <label 
    rule="button" aria-disabled="false"
    class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" 
    data-bind="attr: { 'for' : 'myBold'+ ID},
               hasFocus: $root.bIsSelected,
               event: { mouseover: $root.bMouseOver, mouseout: $root.bMouseOut },
               css: { 'ui-state-active' : isBold, 'ui-state-focus' : $root.bIsSelected(), 'ui-state-hover' : $root.bHovering(), 'ui-corner-left': isFirst, 'ui-corner-right': isRight }">
        <span class="ui-button-text" data-bind="text: letter"></span>
    </label>
<!-- /ko -->