2017-08-30 2 views
0

Je suis mise à jour des données dans la base de données en entrant la valeur dans la cellule du tableau, j'ai besoin de mettre l'accent sur la même cellule si la validation échoue. cette table est délimitée par le modèle de vue de knockout.js.Knockout.js hasfocus

self.FirstName = ko.observable(report.OverallRetention).extend({ 
    reportValueChange: { 
    property: firstName 
    } 
}); 
ko.extenders.reportValueChange = function(target, option) { 
    debugger; 
    var _oldValue; 
    target.setFocus = function(val) { 
     target.hasfocus = val; 
    }; 
    target.subscribe(function(oldValue) { 
     _oldValue = oldValue; 
    }, null, 'beforeChange'); 
    target.subscribe(function(newValue) { ///////Want to set set focus here. 
+0

self.FirstName = ko.observable (rapport .OverallRetention) .extend ({reportValueChange: {property: firstName}}); Ko.extenders.reportValueChange = fonction (cible, option) { débogueur; ; var _oldValue; target.setFocus = function (val) { target.hasfocus = val; }; target.subscribe (function (oldValue) { _oldValue = ancienne valeur; }, null, 'beforeChange'); target.subscribe (function (nouvelleValeur) { /////// Vous voulez définir la mise au point ici } – ALI

Répondre

0

ne utiliseriez-vous pas simplement la liaison de données hasFocus?

https://jsfiddle.net/0o89pmju/52/

cliquez sur le bouton nom clair et validation échoue. et l'autofocus sera réglé sur le prénom.

Je n'étais pas tout à fait la suite de votre extension si je le besoin un de la documentation http://knockoutjs.com/documentation/extenders.html

html

<p data-bind="css: { error: firstName.hasError }"> 
    <input data-bind='value: firstName, valueUpdate: "afterkeydown", hasFocus: firstName.hasError' /> 
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'> </span> 
</p> 
<p data-bind="css: { error: lastName.hasError }"> 
    <input data-bind='value: lastName, valueUpdate: "afterkeydown"' /> 
    <span data-bind='visible: lastName.hasError, text: lastName.validationMessage'> </span> 
</p> 
<p> 
    <button data-bind="click: clearName">clear first name</button> 

    </button> 
</p> 

js

ko.extenders.required = function(target, overrideMessage) { 
    //add some sub-observables to our observable 
    target.hasError = ko.observable(); 
    target.validationMessage = ko.observable(); 

    //define a function to do validation 
    function validate(newValue) { 
    target.hasError(newValue ? false : true); 
    target.validationMessage(newValue ? "" : overrideMessage || "This field is required"); 
    } 

    //initial validation 
    validate(target()); 

    //validate whenever the value changes 
    target.subscribe(validate); 

    //return the original observable 
    return target; 
}; 

function AppViewModel(first, last) { 
    var self = this; 
    this.firstName = ko.observable(first).extend({ 
    required: "Please enter a first name" 
    }); 
    this.lastName = ko.observable(last).extend({ 
    required: "" 
    }); 
    this.clearName = function() { 
    self.firstName(''); 
    self.lastName(''); 
    } 
} 

ko.applyBindings(new AppViewModel("Bob", "Smith")); 
+0

J'ai utilisé cette approche, mais cela prend trop de temps pour le rendu des données. – ALI