javascript - Binding events conditionally in Backbone - mobile or desktop - Stack Overflow

admin管理员组

文章数量:1287167

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);

    }

},
...

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);

    }

},
...

• javascript
• jquery
• backbone.js
• backbone-events

Share Improve this question Follow edited Jul 18, 2012 at 10:28 Maroshii asked Jul 18, 2012 at 9:53 MaroshiiMaroshii 4,02744 gold badges2626 silver badges2929 bronze badges 1

• and I guess windows phone is missing from you user agent regex stackoverflow./a/9926619/429521 – Felipe Sabino Commented Apr 10, 2013 at 19:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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à!

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
});

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

本文标签： javascriptBinding events conditionally in Backbonemobile or desktopStack Overflow