Привязка событий условно в магистральном-мобильном или настольном


Чтобы облегчить чтение, я помещаю все под функцию initialize. Здесь что-то не так? Тревога срабатывает, так что это не условие. У меня есть скрытые действия share и я хотел бы показать их при наведении на рабочий стол и нажать на мобильный телефон, учитывая невозможность наведения. Я что-то упустил? console.log() не выдает никаких ошибок.

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

    }

},
...
3 2

3 ответа:

Я думаю, что проблема может заключаться в том, что вы связываете события jQuery-способом, а не магистральным способом, используя delegateEvents.

Я предлагаю вам попробовать следующее:

if(isMobile){

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

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

}

Надеюсь, это поможет.

------- обновление -------

Я проверил это сам, вы можете сделать это очень красивым способом!

Сначала удалите все, что является мобильным и делегировать события дерьмо из вашего метода инициализации, он просто загромождает его! Затем сделайте позвоночник.Просмотр хэша событий в виде функция, которая возвращает хэш событий (да, вы можете это сделать!)

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

И вуаля!

Я сделаю это следующим образом:

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

Умм.. это то, что вы определяете $share, но затем используете share.на (нет $)?