javascript - 如何使用 knockoutJS 设置悬停和焦点的 css 类

Question

我终于找到了一种方法，可以让 jQuery UI 按钮集“工作”并带有 knockout。事实上，我宁愿模仿它。添加所有默认类是一回事，但我不得不认为应该有一种更简单的方法来解决悬停和聚焦问题。

我试过 knockout-jqueryUI binding无济于事。不知何故所有的类(class)都被撤消了。

HTML:

<div data-bind="with: selected, jqButtonset: {}">
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : 'myBold'+ ID}, checked: isBold" >
    <label rule="button" aria-disabled="false"
        class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left 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() }">
        <span class="ui-button-text">B</span>
    </label>
    <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : 'myItalic'+ID}, checked: isItalic">
    <label rule="button" aria-disabled="false"
           class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-none ui-state-active"  
           data-bind="attr: { 'for' : 'myItalic'+ ID},
                      hasFocus: $root.iIsSelected,
                      event: { mouseover: $root.iMouseOver, mouseout: $root.iMouseOut },
                      css: { 'ui-state-active' : isItalic, 'ui-state-focus' : $root.iIsSelected(), 'ui-state-hover' : $root.iHovering() }">
        <span class="ui-button-text">I</span>
    </label>
    <input class="ui-helper-hidden-accessible" type="checkbox" data-bind="attr: { 'id' : 'myUnderlined'+ID}, checked: isUnderlined">
    <label rule="button" aria-disabled="false"
           class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active"  
           data-bind="attr: { 'for' : 'myUnderlined'+ ID},
                      hasFocus: $root.uIsSelected,
                      event: { mouseover: $root.uMouseOver, mouseout: $root.uMouseOut },
                      css: { 'ui-state-active' : isUnderlined, 'ui-state-focus' : $root.uIsSelected(), 'ui-state-hover' : $root.uHovering()  }">
        <span class="ui-button-text">U</span>
    </label>                                   
</div>

JavaScript:

ko.bindingHandlers.jqButtonset = {
    init: function (element) {
        $(element).buttonset(); // Turns the element into a jQuery UI button
    },
    update: function (element, valueAccessor) {
        var currentValue = valueAccessor();
        // Here we just update the "disabled" state, but you could update other properties too
        $(element).buttonset("option", "disabled", currentValue.enable === false);
    }
};

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

    self.ID = data.ID;    
    self.name = ko.observable(data.name);
    self.isBold = ko.observable(data.isBold || false);
    self.isItalic = ko.observable(data.isItalic || false);
    self.isUnderlined = ko.observable(data.isUnderlined || false);

    return self;
};

viewModel = function(){
    var self = this;

    // data
    self.items = ko.observableArray([
        new Title( {ID: 1, name: 'The first one', isBold: true, isItalic: false }),
        new Title( {ID: 2, name: 'The second one', isBold: false, isItalic: true, isUnderlined: true })
]); 
    self.selected = ko.observable();

    // handling hover & focus
    self.bHovering = ko.observable(false);
    self.iHovering = ko.observable(false);
    self.uHovering = ko.observable(false);
    self.bIsSelected = ko.observable(false);
    self.iIsSelected = ko.observable(false);
    self.uIsSelected = ko.observable(false);
    self.bMouseOver = function(){ self.bHovering(true);};
    self.bMouseOut = function(){ self.bHovering(false); };
    self.iMouseOver = function(){ self.iHovering(true);};
    self.iMouseOut = function(){ self.iHovering(false); };
    self.uMouseOver = function(){ self.uHovering(true);};
    self.uMouseOut = function(){ self.uHovering(false); };
};


ko.applyBindings( new viewModel() );

在这里 fiddle :http://jsfiddle.net/AsleG/3vn5wuwr/2/

我的问题:有没有比我的按钮单独方法更简单的方法来设置“ui-state-hover”和“ui-state-focus”的 css 类？

Answer 1

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

http://jsfiddle.net/3vn5wuwr/7/

所以按钮得到一个模型

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