Backbone events

Question

Hi I was wondering how I handle the remove hover state using backbone and js

currently I have

events: {
  "hover .info"   : "hover"
},

hover:(e) =>
  $(e.currentTarget).css("background-color", "#333")

I was wondering how I would handle the event where i move my mouse away from the element with class .info

If i do standard coffee script inside to do this inside the hover: event handler it requires 2 hovers for it to work.

I basically want to imitate

$(".info").hover(
    function() {
       $(this).css("background-color", "#333")
    },
    function() {
       $(this).css("background-color", "#F3F")
    },
});

Thanks

Answer 1

From the jQuery docs:

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

So I think the best way to handle this with Backbone is just to set two events (sorry, I don't believe in CoffeeScript):

events: {
  "mouseenter .info"   : "hoverOn",
  "mouseleave .info"   : "hoverOff"
},

hoverOn: function(e) { ... },
hoverOff: function(e) { ... }

Alternatively, you could use the single argument syntax, which takes one function and calls it on both in and out - this works well with .toggle() and toggleClass().

Answer 2

There is a version of hover() that takes one callback function:

Description: Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.

This is the version of hover that will get used by Backbone. So you could handle this with toggleClass and a couple CSS classes instead of directly messing around with the css:

hover:(e) =>
  $(e.currentTarget).toggleClass('dark-gray')

The default #F3F color would be set on the element by default and you'd have:

.dark-gray {
  background-color: #333
}

in your stylesheets. If you cannot for some reason use toggleClass, you'd have to bind to mouseenter and mouseleave individually.