Knockout zum Auslösen von Ereignissen beim Umschalten von DIVs

Question

Ich suche nach einem Ereignis (nämlich einem Speichern/Abbrechen-Dialog) beim Umschalten zwischen Textelementen - mit einem Vorbehalt: es ist nicht pro Element, es ist per enthält div.

Ich habe mehrere divs, jedes mit den gleichen Kontrollen. Wenn irgendwelche Werte in einem geändert werden, der div enthält und der Fokus auf einen anderen umgeschaltet wird, muss ich feststellen, ob die Knockout-Daten, die ich verlasse, schmutzig sind und dann das Ereignis auslösen.

Unterstützt Knockout diese Art von Ereignisbindung oder muss ich etwas anderes verdrahten? Es sieht so aus, als könnte ich das Tabindex-Attribut für meine Divs verwenden, aber ich würde es vorziehen, die vorhandene Funktionalität im Framework zu verwenden, wenn sie verfügbar ist.

Ein Mockup des Codes würde wie folgt aussehen:

<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

wie über so etwas. Art von Jquery/Knockout-Hybrid. Wenn Sie auf ein Attribut klicken, wird die Schaltfläche zum Speichern angezeigt. Nach dem Speichern und Verschieben zu einem anderen div bekommen Fokus wieder speichern.

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" />