title: Backbone - toggleClass on hover
body: <p>I am new to Backbone and understand the idea, but am having trouble properly writing a simple toggleClass function. My site is a grid of squares that when a square has the class "hover" some css causes the appearance to change (obviously). My problem is the toggleClass is not working. My code is as follows:</p>
  
  <pre><code>var IndexView = Backbone.View.extend({
  el: $('#main'),
  indexTemplate: $("#indexSquare").template(),
  
  events: {
  "mouseover .square"  : "mouseovercard"
  },
  
  render: function() {
      removeFallbacks();
      var sg = this;
  
      this.el.fadeOut('fast', function() {
      sg.el.empty();
      $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
      sg.el.fadeIn('fast');
      });
      return this;
  },
  
  mouseovercard: function() {
  
      $(this).toggleClass('hover')
      console.log("hey you're hovering!")
  
  }
  
  });
  </code></pre>
  
  <p>What exactly is wrong here? Any help will be much appreciated!</p>