Aggiunta della funzionalità "radio" ai pulsanti quando si utilizza un raccoglitore personalizzato in Rivets.js con Backbone.js

Question

Sto utilizzando Rivets.js per collegare elementi al mio modello. Sto usando Bootstrap di Twitter per la progettazione e ho impostato tre pulsanti per scegliere tra i valori 1, 2 e 3 (funzionalmente equivalenti ai pulsanti di opzione).

ho istituito tre pulsanti in un gruppo di pulsanti come questo:

<div class="btn-group" id="input_level" data-toggle="model.level"> 
    <button data-toggle-value="1" class="btn active">One</button> 
    <button data-toggle-value="2" class="btn">Two</button> 
    <button data-toggle-value="3" class="btn">Three</button> 
</div> 

Ho aggiunto un costume toggle legante in questo modo:

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

Questo aggiorna lo stato del pulsante come dovrebbe, ma non funziona nell'altro modo, ovvero non c'è nessun evento associato all'evento click del pulsante. Voglio generalizzare questo a Rivets.js quindi non devo aggiungere un evento click per ogni gruppo di pulsanti nel modulo nella vista Backbone.

È questa funzionalità di base in Rivetti e, in caso affermativo, come si configura?

Answer 1

Dopo aver studiato i Rivets.js annotato fonte, ho trovato la soluzione, dopo un po '(non sto usando CoffeeScript, quindi è stato un po' di fastidio per leggere):

ho sostituito questo pezzo di originale codice nella mia domanda:

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

Con questo:

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

Il codice iniziale è ora sotto rivets.binders.toggle.routine invece di rivets.binders.toggle.