Relier les événements conditionnellement dans Backbone - mobile ou de bureau

Question

Pour faciliter la lecture je mets tout sous la fonction initialize. Y at-il un problème ici? L'alerte est déclenchée donc ce n'est pas la condition. J'ai les actions de partage cachés et voudrais les montrer sur Hover sur le bureau et Tap sur mobile étant donné l'impossibilité de vol stationnaire. Ai-je raté quelque chose ici? console.log() ne jette aucune erreur.

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

    } 

}, 
... 

Answer 1

Je pense que le problème est peut-être que vous liez les événements de la manière jquery-backbone, en utilisant delegateEvents.

Je vous suggère d'essayer ce qui suit:

if(isMobile){ 

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

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

} 

Hope this helps.

MISE A JOUR ------- -------

J'ai testé ce moi-même, vous pouvez le faire d'une manière très beau! Tout d'abord, supprimez tout ce qui est mobile et déléguez les événements crap de votre méthode d'initialisation, cela les encombre! Ensuite, faire le hachage des événements Backbone.View en fonction qui retourne un hachage d'événements (Oui, vous pouvez le faire!)

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à!

Answer 2

Umm .. est-ce que vous définissez $ par action, mais utilisez ensuite share.on (pas $)?

Answer 3

je le ferai de cette façon:

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