Использование привязок Knockout.js для отображения ошибок в форме

Question

Я хотел бы использовать Knockout.js, чтобы выделить ошибки в форме. Некоторые из этих ошибок могут быть сгенерированы с помощью проверки на стороне клиента, а некоторые из них могут появляться на сервере при сохранении формы. В идеале я хотел бы шаблон, чтобы выглядеть следующим образом:

<label data-bind="css: { error: Errors.ProjectName }">Project Name<input data-bind="value: ProjectName" /></label> 

Errors.ProjectName Если верно иш, то выше <label> будет иметь CSS класс error.

Однако, чтобы сделать это, я думаю, что я должен сделать что-то вроде Errors:

this.Errors = { 
    ProjectName: ko.observable(false), 
    FieldA: ko.observable(false), 
    FieldB: ko.observable(false), 
    // ... Every single field 
}; 

Который является обслуживание кошмар, так как эта форма имеет много, много полей. Поэтому, вместо этого, я хотел бы, чтобы модель каким-то образом содержала список полей ошибок. Больше как:

this.Errors = ko.observableArray([]); 

Когда мой код становится известно об ошибке, я могу просто установить этот массив в список полей, содержащих ошибки:

model.Errors(['ProjectName']); // ProjectName is invalid 

Шаблон затем стал:

<label data-bind="css: { error: Errors.indexOf('ProjectName') >= 0 }">Project Name<input data-bind="value: ProjectName" /></label> 

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

Некоторые могут утверждать, что Knockout.js не является подходящим инструментом для отображения сообщений об ошибках и проверки пользовательского интерфейса. Вероятно, это справедливое мнение. Однако мне нравится идея иметь одну модель для хранения ошибок, а так как ошибки добавляются или удаляются из этой модели, сообщения об ошибках и выделенные поля в пользовательском интерфейсе автоматически отражают эти изменения, и состояние данных может быть легко запрошено на в любой момент.

Вопрос: Каков самый чистый способ реализации выделения ошибки, когда модель содержит список полей по ошибке?

Answer 1

Мое предпочтение заключалось в использовании чего-то вроде isValid или hasError суб-наблюдаемого на наблюдаемом для отслеживания его состояния. Таким образом, ваш вид модели будет выглядеть следующим образом:

this.ProjectName = ko.observable(); 
this.ProjectName.hasError = ko.observable(); //or can be a computed, if it will handle keeping itself updated 

Затем вы можете связать как:

<label data-bind="css: { error: ProjectName.hasError }">Project Name<input data-bind="value: ProjectName" /></label> 

Другая хорошая вещь о «суб-наблюдаемыми» является то, что они будут падать при преобразовании данные обратно в JSON для отправки на сервер.

У нас есть пример в документации KO использования удлинителей для добавления суб-наблюдаемыми: http://knockoutjs.com/documentation/extenders.html#live_example_2_adding_validation_to_an_observable

Кроме того, вы можете захотеть взглянуть на Knockout-Validation, так как он использует подобный подход.