Quelle est la différence entre "API" et "entrée" bascule du bouton bascule dans bootstrap-toggle?

Question

Dans un exemple de contrôle Bootstrap toggle button, il existe deux exemples d'activation et de désactivation: par API et par entrée.

section "API vs entrée":

<input id="toggle-trigger" type="checkbox" data-toggle="toggle"> 
<button class="btn btn-success" onclick="toggleOn()">On by API</button> 
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button> 
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button> 
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button> 
<script> 
    function toggleOn() { 
    $('#toggle-trigger').bootstrapToggle('on') 
    } 
    function toggleOff() { 
    $('#toggle-trigger').bootstrapToggle('off') 
    } 
    function toggleOnByInput() { 
    $('#toggle-trigger').prop('checked', true).change() 
    } 
    function toggleOffByInput() { 
    $('#toggle-trigger').prop('checked', false).change() 
    } 
</script> 

Comme on peut le voir, bouton de commande par l'API est fait appel à la fonction bootstrapToogle(), tout en opérant par des moyens d'entrée appelant prop('checked', true).change().

Quelle est la différence entre ces deux méthodes? Visuellement, ils font la même chose.

Answer 1

La différence principale que je vois est que vous pouvez changer une case en utilisant prop() et ne pas avoir à savoir qu'il est lié à un plugin.

Si le plugin a été supprimé ... le comportement ne changera pas sur l'entrée sous-jacente si vous avez toujours utilisé prop(). À l'inverse, l'ajout du plugin au-dessus du code existant ne nécessiterait pas non plus de modifications de code.

Je pense que l'intention de l'auteur était de montrer que le plugin reconnaît événement change lors du déclenchement externe

Answer 2

Le bootstrapToggle gère un peu plus de modifier la propriété:

Toggle.prototype.on = function (silent) { 
    if (this.$element.prop('disabled')) return false 
    this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) 
    this.$element.prop('checked', true) 
    if (!silent) this.trigger() 
} 

Toggle.prototype.off = function (silent) { 
    if (this.$element.prop('disabled')) return false 
    this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') 
    this.$element.prop('checked', false) 
    if (!silent) this.trigger() 
} 

D'après ce que je peux dire, il est pour ajouter des classes séparées pour les états on/off lors de l'utilisation de bootstrapToggle, alors que sinon vous devrez utiliser CSS pour vérifier si l'élément est vérifié. C'est vraiment la seule différence que je peux trouver, donc cela ne devrait pas faire beaucoup de différence, sauf pour la façon dont vous coiffez les boutons.