Événements dynamiques Backbone js avec variables

Question

Disons que j'ai obtenu ce point de vue :

var HomeView = Backbone.View.extend({
    el: '#application',
    initialize: function() {
        this.template = template; // Comes from requireJS (not relevant)
        this.$elements = {};
    },
    render: function() {
        this.$el.html(this.template);

        this.$elements = {
            signIn: {
                email: $('#sign-in-email'),
                password: $('#sign-in-password')
            }
        };

        // Demonstration.
        this.$elements.signIn.email.myPluginInit();
        this.$elements.signIn.password.myPluginInit();

        //
        // NOTE: How to handle the events?
        //
    }
});

J'ai l'objet this.$elements, qui contiendra tous les objets de mon DOM, comment puis-je mettre des événements sur eux car avec cette solution ils sont variables. C'est ce que j'avais l'habitude de faire (voir backbone.org).

var HomeView = Backbone.View.extend({
  events: {
    'click #sign-in-email': 'clickedSignInEmail',
    'focus #sign-in-password': 'focusSignInPassword'
  }
});

Answer 1

Utilisation événements délégués offre un certain nombre d'avantages par rapport à l'utilisation manuelle de jQuery pour lier des événements aux éléments enfants pendant le rendu. Tous les sont liés à la vue avant d'être transmis à jQuery, de sorte que lorsque les rappels sont invoqués, ils continuent à se référer à l'objet l'objet vue. Lorsque delegateEvents est exécuté à nouveau, peut-être avec un hachage d'événements différent, tous les callbacks sont liés à la vue. d'événements différents, tous les rappels sont supprimés et délégués à nouveau. - utile pour les vues qui doivent se comporter différemment selon les modes. modes.

Exemple de code :

initialiaze: function () {
  // …
  this.events = this.events || {};
  // dynamically build event key
  var eventKey = 'click ' + '#sign-in-email';
  this.events[eventKey] = 'clickedSignInEmail';
  this.delegateEvents();
  // …
}

Answer 2

Pourquoi ne pas utiliser la syntaxe normale de gestion des événements de jQuery ?

this.$elements.signIn.email.click(this.clickedSignInEmail);
this.$elements.signIn.password.focus(this.focusSignInPassword);

Vous pouvez également utiliser la fonction Backbone.View.delegateEvents mais cela vous oblige à construire le hachage des événements à partir de vos sélecteurs.