Utiliser Knockout pour déclencher des événements lors du changement de DIVs

Question

Je cherche à déclencher un événement (à savoir, un dialogue de sauvegarde/annulation) lors du changement de focus entre les éléments de texte - avec une mise en garde: ce n'est pas par élément, c'est par div.

Je vais avoir plusieurs divs, chacun avec les mêmes commandes. Si des valeurs sont changées dans l'une contenant div et le focus est commuté à l'autre, j'ai besoin de déterminer si les données knock-out que je quitte est sale, puis déclencher l'événement.

Est-ce que knockout supporte ce type d'événement ou est-ce que je dois câbler autre chose? Il semble que je pourrais utiliser l'attribut tabindex sur mes divs mais je préférerais utiliser la fonctionnalité existante dans le framework si elle est disponible.

Un mockup du code ressemblerait à ceci:

<div> 
    First Name: <input type="text" name="firstName"/><br/> 
    Last Name: <input type="text" name="lastName"/><br/> 
    Customer Type: <select> 
     <option value="Individual">Individual</option> 
     <option value="Corporate">Corporate</option> 
    </select> 
</div> 
<div> 
    First Name: <input type="text" name="firstName"/><br/> 
    Last Name: <input type="text" name="lastName"/><br/> 
    Customer Type: <select> 
     <option value="Individual">Individual</option> 
     <option value="Corporate">Corporate</option> 
    </select> 
</div> 

Answer 1

que diriez-vous quelque chose comme ça. type d'hybride jquery/knockout. cliquant sur un attribut affiche le bouton de sauvegarde. Après avoir enregistré et déplacé vers un div différent, la mise au point vous permet d'enregistrer à nouveau.

function viewModel() { 
 
    var self = this; 
 
    this.currentDiv = ko.observable(''); 
 
    this.isDirty = ko.observable(false); 
 
    this.save = function() { 
 
    self.isDirty(false) 
 
    } 
 
} 
 

 

 
var vm = new viewModel(); 
 

 

 
(function($) { 
 

 
    ko.applyBindings(vm); //bind the knockout model 
 

 
    $("input, select").not('#save').focus(function() { 
 
    var d = $(this).parent('div').attr('id'); 
 
    if (d != vm.currentDiv() || vm.isDirty()) { 
 
     vm.isDirty(true); 
 
    } else { 
 
     vm.isDirty(false); 
 
    } 
 
    vm.currentDiv(d); 
 
    }); 
 

 
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div1"> First Name: 
 
<input type="text" name="firstName" /> 
 
<br/> Last Name: 
 
<input type="text" name="lastName" /> 
 
<br/> Customer Type: 
 
<select> 
 
    <option value="Individual">Individual</option> 
 
    <option value="Corporate">Corporate</option> 
 
    </select> 
 
</div> 
 
<div id="div2"> 
 
    First Name: 
 
    <input type="text" name="firstName" /> 
 
    <br/> Last Name: 
 
    <input type="text" name="lastName" /> 
 
    <br/> Customer Type: 
 
    <select> 
 
    <option value="Individual">Individual</option> 
 
    <option value="Corporate">Corporate</option> 
 
    </select> 
 
</div> 
 

 
<input type="button" id="save" data-bind="visible: isDirty, click: save" value="save" />