Binding events conditionally in Backbone - mobile or desktop

Question

To make it easier to read i put everything under the initialize function. Is there something wrong here? The alert gets triggered so it's not the condition. I have the share actions hidden and would like to show them on Hover on desktop and Tap on mobile given the hover impossibility. Am I missing something here? console.log() doesn't throw any errors.

App.Views.Title = Backbone.View.extend({

initialize:function(){

    _.bindAll(this,"stickToTop");
    this.template = _.template($("#title").html());
    this.render();
    $(window).scroll(this.stickToTop);

    var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
    var share = this.$(".share");

    if(isMobile){

        // alert('mobile')
        share.on('click' , this.shareMobile , this);

    }else{
        // alert('not mobile')
        share.on('hover' , this.shareDesktop , this);

    }

},
...

and I guess `windows phone` is missing from you user agent regex http://stackoverflow.com/a/9926619/429521 — Felipe Sabino, Apr 10 '13 at 19:54

jakee · Accepted Answer · 2012-07-18T13:09:04.613

13

I think the problem might be that you're binding the events the jquery-way not the Backbone way, by using delegateEvents.

I suggest you to try the following:

if(isMobile){

    // alert('mobile')
    this.delegateEvents({"click .share" : "shareMobile"});

}else{
    // alert('not mobile')
    this.delegateEvents({"hover .share" : "shareDesktop"});

}

Hope this helps.

------- UPDATE -------

I tested this out myself, you can do this in a very beautiful way!

First remove all that isMobile and delegate events crap from your initialize method, it just clutters it up! Then make the Backbone.View events hash as a function that returns an events hash (Yes, you CAN do that!)

events: function() {
  // check for the mobility HERE!
  var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
  var events_hash = {
    // insert all the events that go here regardless of mobile or not
  };
  if (isMobile) {
    _.extend(events_hash, {"click .share": "shareMobile"});
  } else {
    _.extend(events_hash, {"hover .share": "shareDesktop"});
  }
  return events_hash;
}

Et voilà!

edited Jul 18 '12 at 13:09

answered Jul 18 '12 at 11:57

jakee

18,486
3
37
42

Great! It work perfectly... I didn't see it in the documentation. – Maroshii Jul 18 '12 at 12:21
sweet. Just learned something new. I have had items in the events property not work correctly if the view was not declared after doc.ready. this.delegateEvents is a much more idomatic to backbone then how I have been getting around it – Dennis Burton Jul 18 '12 at 12:45
check out the update if you want to learn more, learned something myself as well! – jakee Jul 18 '12 at 13:09
Awesome! I wish i could give you another +1. Thanks! – Maroshii Jul 18 '12 at 13:55
Brilliant update, returning the events hash. I've been trying to work that out for a while – Clawg Dec 23 '12 at 20:47

Daniel Aranda · Answer 2 · 2012-07-18T16:44:34.010

1

I will do it in this way:

App.Views.Title = Backbone.View.extend({

    events : {
      'hover .mobile .share' : 'shareMobile',
      'click .desktop .share' : 'shareDesktop'
    },

    initialize:function(){

        //stuff...

        var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

        if(isMobile){
           this.$el.addClass('mobile');
        }else{
           this.$el.addClass('desktop');
        }

    }
    //stuff
});

edited Jul 18 '12 at 16:44

answered Jul 18 '12 at 14:03

Daniel Aranda

6,426
2
21
28

I feel it more readable, and homogeneous with the Backbone declaration of events. – Daniel Aranda Jul 18 '12 at 16:44
However i prefer @jakee's approach 'cause all the logic happens within the event function and returns the object without cluttering the initialize function nor adding additional classes, IMO. – Maroshii Jul 18 '12 at 17:29

score 0 · Answer 3 · answered Jul 18 '12 at 10:09

0

Umm.. is it that you define $share but then use share.on (no $)?

answered Jul 18 '12 at 10:09

lecstor

5,619
21
27

oohh! Nono, it's not that, copy/paste error, it's been updated! Thanks! – Maroshii Jul 18 '12 at 10:30

Binding events conditionally in Backbone - mobile or desktop

3 Answers3