Ajout de la fonctionnalité "radio" aux boutons lors de l'utilisation d'un binder personnalisé dans Rivets.js avec Backbone.js

Question

Je suis en train d'utiliser Rivets.js pour lier des éléments à mon modèle. J'utilise Bootstrap de Twitter pour le design et j'ai configuré trois boutons pour choisir parmi les valeurs 1, 2 et 3 (fonctionnellement équivalent aux boutons radio).

J'ai configuré trois boutons dans un groupe de boutons comme ceci :

    Un
    Deux
    Trois

J'ai ajouté un binder toggle personnalisé de cette manière :

rivets.binders.toggle = function(el,value){
    $(el).find('button[data-toggle-value="' + value + '"]')
        .addClass('active').siblings().removeClass('active');
}

Cela met à jour l'état du bouton comme il se doit, mais ne fonctionne pas dans l'autre sens - c'est-à-dire qu'il n'y a pas d'événement lié à l'événement de clic sur le bouton. Je veux généraliser cela à Rivets.js pour ne pas avoir à ajouter un événement de clic à chaque groupe de boutons dans le formulaire dans la vue Backbone.

Cette fonctionnalité de base est-elle disponible dans Rivets, et si oui, comment la configurer ?

Answer 1

Après avoir étudié la source annotée de Rivets.js, j'ai trouvé la solution après un certain temps (je n'utilise pas CoffeeScript, donc c'était un peu difficile à lire) :

J'ai remplacé ce morceau de code original dans ma question :

rivets.binders.toggle = function(el,value){
    $(el).find('button[data-toggle-value="' + value + '"]')
        .addClass('active').siblings().removeClass('active');
}

Avec ceci :

rivets.binders.toggle = {
    publishes: true,
    bind: function(el){
        $(el).on('click', 'button:not(.active)', _.bind(function(e){
            this.model.set(this.keypath, $(e.currentTarget).data('toggle-value'));
        }, this));
    },
    unbind: function(el){
        $(el).off('click', 'button:not(.active)');
    },
    routine: function(el,value){
        $(el).find('button[data-toggle-value="' + value + '"]')
            .addClass('active').siblings().removeClass('active');
    }
};

Le code initial est maintenant sous rivets.binders.toggle.routine au lieu de rivets.binders.toggle.