I'd like to implement a reversible animation in Backbone, in the same way we do it in jquery :

$('a.contact').toggle(
function(){
    // odd clicks
},
function(){
    // even clicks
});

my question is how to do this in backbone's event syntax? How to do I mimic the function, function setup?

events : {
  'click .toggleDiv' : this.doToggle
},

doToggle : function() { ??? }

I'd like to implement a reversible animation in Backbone, in the same way we do it in jquery :

$('a.contact').toggle(
function(){
    // odd clicks
},
function(){
    // even clicks
});

my question is how to do this in backbone's event syntax? How to do I mimic the function, function setup?

events : {
  'click .toggleDiv' : this.doToggle
},

doToggle : function() { ??? }

• javascript
• jquery
• backbone.js

4 Answers 4

Backbone's view events delegate directly to jQuery, and give you access to all of the standard DOM event arguments through the callback method. So, you can easily call jQuery's toggle method on the element:

Backbone.View.extend({

  events: {
    "click a.contact": "linkClicked"
  },

  linkClicked: function(e){
    $(e.currentTarget).toggle(
      function() {
        // odd clicks
      },
      function() {
        // even clicks
      }
    );
  }

});

I was looking for a solution to this problem and I just went about it the old fashioned way. I also wanted to be able to locate my hideText() method from other views in my app.

So now I can check the status of the 'showmeState' from any other view and run either hideText() or showText() depending on what I want to do with it. I have tried to simplify the code below by removing things like render and initialize to make the example more clear.

var View = Backbone.View.extend({
  events: {
    'click': 'toggleContent'
  },
  showmeState: true,
  toggleContent: function(){
    if (this.showmeState === false) {
      this.showText();
    } else {
      this.hideText();
    }
  },
  hideText: function() {
    this.$el.find('p').hide();
    this.showmeState = false;
  },
  showText: function() {
    this.$el.find('p').show();
    this.showmeState = true;
  }
});

var view = new View();

Is the element you want to toggle within the view receiving the event? If so:

doToggle: function() {
  this.$("a.contact").toggle()
}

I actually believe the only to do this using events is to add a trigger in order to keep the actual flow together. It seems a bit clumsy to be honest to have to use toggle in this way.

Backbone.View.extend({

  events: {
    "click .button": "doToggle"
  },

  doToggle: function(e){
    var myEle = $(e.currentTarget);
    $(e.currentTarget).toggle(
      function() {
        // odd clicks
      },
      function() {
        // even clicks
      }
    );
    myEle.trigger('click');
  }

});

It's probably cleaner to just use

Backbone.View.extend({

  el: '#el',

  initalize: function() {
    this.render();
  },

  doToggle: {
    var myEle = this.$el.find('.myEle');
    myEle.toggle(
      function() {
        // odd clicks
      },
      function() {
        // even clicks
      }
    );
  },

  render: function(e){


    //other stuff

    this.doToggle();

   return this;
  }

});