Question

Я пытаюсь реализовать валидаций с использованием Knockout и попытались пример «Боб» из here

<p data-bind="css: { error: firstName.hasError }"> 
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' /> 
    <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> 

Исходный код: Модельное

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) { 
    this.firstName = ko.observable(first).extend({ required: "Please enter a first name" }); 
    this.lastName = ko.observable(last).extend({ required: "" }); 
} 

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

CSS:

.validationError{ 
     border:solid 1px red; 
    } 

При загрузке начальной страницы в текстовых полях не будет никаких данных. Поэтому я удалил жестко обозначенные имена. Теперь сообщение проверки отображается при загрузке страницы, а не когда пользователь покидает текстовые поля. Как-то KO думает во время загрузки страницы, что значение текстового поля изменилось и активировало код проверки.

Как остановить это?

Здесь используется прецедент, который я пытаюсь сделать. У меня есть два текстовых поля, нужно отобразить красную рамку без сообщения, а другой нужно показать сообщение о проверке.

Sample here

Спасибо.

Answer 1

Первоначальная проверка инициируется линии:

validate(target()); 

закомментировать.

Но теперь, если вы введете пустое текстовое поле и выпрыгнете из него, изменений не будет: поле было пустым, когда было сфокусировано, и при размывании было пустым. Таким образом, наблюдаемый не изменяется, и подписка не запускается.

Итак, вам нужно будет активировать проверку также на размытие, а не только на изменение. Вам нужно будет подписать проверку на событие размытия связанного элемента, чтобы выполнить дополнительную проверку. Но это невозможно, потому что вы не можете присвоить элемент (ы), к которому привязан наблюдаемый.

И насколько я могу думать о решении, поскольку у вас есть только доступ к наблюдаемому, вы не можете достичь того, чего хотите с помощью расширителя.

Вместо этого вам нужно создать custom binding, что позволит вам получить доступ к элементу. В этом случае у вас есть доступ к элементу, аксессуар значения (эквивалентному target() расширителя) и все остальные привязки в элементе. Это подпись пользовательской привязки функции обновления:

function(element, valueAccessor, allBindings) 

Я создал реализацию образец required пользовательского связывания обработчика, который можно использовать в качестве точки satrting. Here is the fiddle, а вот код:

HTML:

<input type="text" data-bind="value: name, required: 'Name required'"> 
<span data-bind="visible: name.hasError, text: name.requiredMessage"></span> 
<br/> 
<input type="text" data-bind="value: age, required: 'Age required'"> 
<span data-bind="visible: age.hasError, text: age.requiredMessage"></span> 

JavaScript:

ko.bindingHandlers.required = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 
     console.log('Init', element); 
     var valueObs = allBindings.get('value'); 
     valueObs.hasError = ko.observable(false); 
     valueObs.requiredMessage = ko.observable(ko.unwrap(valueAccessor())); 
     valueObs.firstTime = true; 
     $(element).blur(function() { 
      console.log('Blur'); 
      valueObs.hasError(!valueObs()); 
     }); 
    }, 

    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever any observables/computeds that are accessed change 
     // Update the DOM element based on the supplied values here. 
     var valueObs = allBindings.get('value'); 
     console.log('value: ', valueObs()); 
     if (valueObs.firstTime) { 
      valueObs.firstTime = false; 
      return; 
     } 
     valueObs.hasError(!valueObs()); 
    } 
}; 

var vm = { 
    name: ko.observable(""), 
    age: ko.observable("") 
}; 

ko.applyBindings(vm);