événement lostfocus / onblur en knockout
je veux exécuter un événement sur un knock-out observable lié à un input. Cette fonction doit être exécutée lorsque le contrôle perd la mise au point, même sans taper quoi que ce soit. J'ai essayé de changer la reliure d'événement, mais ça ne marche pas quand l'utilisateur s'éloigne du contrôle sans rien taper. J'ai essayé l'événement mouseout, mais cela ne se déclenche que lorsque l'utilisateur clique ailleurs dans le formulaire, après avoir perdu la mise au point - pas exactement ce que je veux. Je veux que le même feu dès que la mise au point est éloignée de le contrôle, même avec la touche tab.
<input
type="text"
id="txtFirstName"
tabindex="1"
maxlength="25"
class="txtbox"
style="width: 200px;"
data-bind="value: FirstName,
attr: {title: FirstNameErrorMessage },
css: {validationFailed: !IsValidFirstName() },
event: {mouseout: ValidateFirstName}"
/>
this.ValidateFirstName = function () {
self.IsValidFirstName(true);
self.FirstNameErrorMessage('');
if (self.FirstName() == '') {
self.IsValidFirstName(false);
self.FirstNameErrorMessage('First Name is required');
}
}
quelqu'un Peut-il aider s'il vous plaît?
6 réponses
je pense qu'il y a quelques approches que vous pouvez utiliser. Une bonne option serait d'utiliser KO's hasfocus reliure:http://knockoutjs.com/documentation/hasfocus-binding.html.
vous pouvez vous lier à un booléen observable, puis vous y abonner. Dans l'abonnement, vous pouvez choisir de ne réagissent que lorsque la valeur est maintenant faux.
quelque Chose comme:
self.FirstName = ko.observable();
self.FirstName.focused = ko.observable();
self.FirstName.focused.subscribe(function(newValue) {
if (!newValue) {
//do validation logic here and set any validation observables as necessary
}
});
lid against it like:
data-bind="value: FirstName, hasfocus: FirstName.focused"
je pense que ce serait une bonne option si vous voulez que le feu chaque fois que l'utilisateur quitte le terrain, peu importe comment ils la quittent et qu'une modification a été faite.
j'aime la réponse de @RPNiemeyer. Cependant, je voulais juste souligner que pas tout doit être fait par Ko. C'est juste un outil, et parfois, il n'est pas le meilleur outil pour le travail. Vous pouvez toujours utiliser la liaison directe d'événement comme vous l'avez toujours fait dans JS, i.e.
$('#FirstName').on('blur', function () {
// do something
});
si vous devez réellement interagir avec votre modèle de vue, alors vous pouvez simplement utiliser ko.dataFor comme décrit dans la documentation de Knockout sur l'événement délégation:
$('#FirstName').on('blur', function () {
var data = ko.dataFor(this);
// do something with data, i.e. data.FirstName()
});
Cela a fonctionné pour moi:
data-bind="event: { blur: OnBlurEvent }"
je viens d'avoir le même problème, résolu en créant une reliure personnalisée:
ko.bindingHandlers.modifyOnFocusOut = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).blur(function() {
//Do your work
});
}
}
Et ensuite appelé comme ceci:
data-bind="value: FirstName, modifyOnFocusOut: FirstName"
Avez-vous essayé event:{blur: ValidateFirstName} cet événement sera déclenché si l'utilisateur clic ou " tab " de l'entrée.
<input
type="text"
id="txtFirstName"
tabindex="1"
maxlength="25"
class="txtbox"
style="width: 200px;"
data-bind="value: FirstName,
attr: {title: FirstNameErrorMessage},
css: {validationFailed: !IsValidFirstName()},
event: {blur: ValidateFirstName}"
Voici un JSFiddle un exemple de travail.
module Fx.Ko.Bindings {
export class SetFocusBinding implements KnockoutBindingHandler {
public update(element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
if (valueUnwrapped == undefined) {
return;
}
if (valueUnwrapped)
$(element).focus();
}
}
}
et ...
module Fx.Ko.Bindings {
export class OnBlurBinding implements KnockoutBindingHandler {
public init(element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
$(element).on('blur', function (event) {
value();
});
}
}
}
interface KnockoutBindingHandlers {
onBlur: KnockoutBindingHandler;
}
ko.bindingHandlers.onBlur = new Fx.Ko.Bindings.OnBlurBinding();