如何使用Knockout.js在鼠标悬停时更改CSS类？

Question

我有一个由Knockout.js foreach数据绑定填充的图像网格.默认情况下,网格中的每个图像都有一个由背景颜色设置的黑色轮廓.当用户将鼠标悬停在每个图像上时,我希望该轮廓变为白色以表示它已被突出显示.

目前,我正在使用两个事件处理程序,一个用于mouseenter,一个用于mouseleave.
第一个将图像的CSS类更改为具有白色背景的类.后者将其改回黑色.但是,当鼠标进入图像时,两者都被调用(通过调试确认),因此不会看到任何变化.

的HTML如下:(注:每个图像具有fileName表示图像文件的位置属性有两种.CSS类调用black和white,一个用于每个高亮状态.)

<div id="palette-container" data-bind="foreach: images" style="display: inline-block">
    <div style="float: left">
        <img class="black" data-bind="attr: { id: fileName, src: $parent.imagePath(fileName) }, 
                                      event: { mouseenter: $parent.toWhite(fileName), mouseleave: $parent.toBlack(fileName) }, 
                                      style: { width: $parent.size, height: $parent.size }">
    </div>
</div>

正如你所看到的,我现在不是以非常优雅的方式做这件事.我将每个元素绑定id到其唯一的fileName属性.然后我将fileName传递给事件处理程序,以便id可以访问该元素以更改CSS类.

(A)为什么都mouseenter和mouseleave被当鼠标进入的图像称为？

(B)实现所需突出显示功能的简单方法是什么？

Answer 1

Knockout的目的是通过绑定处理程序以声明方式将视图(您的HTML)连接到您的viewmodel(JavaScript对象).但是,并非每个可能的DOM到视图模型交互都具有预定义的绑定处理程序.

在您的特定情况下(更改样式),您只需使用:hoverCSS伪类.但是你的viewmodel不会注意到这一点.

因此,如果您想要更改不同的属性以响应鼠标移动(例如文本),您可以event"手动" 使用绑定 - 或者您可以创建一个简单的自定义绑定处理程序来设置视图模型的一个属性对mouseenter和mouseleave事件的反应.

自定义绑定处理程序的优点是您现在拥有一个基于其他行为的实际observable.而且您在视图中输入的内容较少.

ko.bindingHandlers.hover = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        ko.applyBindingsToNode(element, {
            event: {
                mouseenter: function () { value(true) },
                mouseleave: function () { value(false) }
            }
        });
    }
}

function Item() {
  this.isHovering = ko.observable(false);
}

ko.applyBindings({
  items: [
    new Item(),
    new Item(),
    new Item(),
    new Item(),
    new Item()
  ]
});

div.item {
  float: left;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  margin: 0 5px 5px 0;
}
div.item.active {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: items">
  <div class="item" data-bind="
    hover: isHovering, text: isHovering, css: {active: isHovering}
  ">
  </div>
</div>

Answer 2

为什么不保持简单呢。使用CSS:hover

//add a hover effect to class .black
.black{ 
border: solid 5px black
} .black:hover { 
border: solid 5px green;
} 

jsfiddle： http: //jsfiddle.net/nmx2og9g/1/