Backbone events

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

Answers


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.


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().


In this precise example, however, you should really use css :hover pseudo class instead of jquery.


If it is not an action link then you can following css : pointer-events:none


Need Your Help

What happens if the first part of an if-structure is false?

c# if-statement

I was wondering what happens when a program processes an if-structure with multiple conditions. I have an idea, but I'm not sure about it. I'll give an example:

How to get firebug to break on exception?

firebug

I'm using Firebug 1.5.4. When I reference an undefined variable or some such, it breaks right where the problem occurs, and throws me into the debug view where I can see the stack and inspect vari...