使用Knockout.js綁定在窗體上顯示錯誤

我想使用Knockout.js來突出顯示窗體上的錯誤。其中一些錯誤可能通過客戶端驗證生成，其中一些錯誤可能來自服務器，當表單被保存時。理想情況下，我想模板看起來像這樣：使用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的那部分需要更清晰，更易讀的方法。

有些人可能會認爲Knockout.js不是用來顯示錯誤消息並驗證UI的正確工具。這可能是一個有效的意見。但是，我喜歡使用單一模型來存儲錯誤的想法，並且隨着錯誤被添加或從該模型中刪除，UI中的錯誤消息和突出顯示的字段會自動反映這些更改，並且可以輕鬆地查詢數據的狀態任何時候。

問題：在模型中包含錯誤字段列表的地方，實現錯誤高亮顯示的最簡潔方法是什麼？

來源

2013-03-18 Mike Christensen

我的偏好是使用類似於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，因爲它使用了類似的方法。

來源

2013-03-18 19:30:02

不知道是否有辦法讓[映射插件]（http://knockoutjs.com/documentation/plugins-mapping.html）自動將這些'hasError'觀察值添加到每個映射字段。 – 2013-03-18 19:39:06

您可以查看映射插件的'create'回調：http：// knockoutjs。com/documentation/plugins-mapping.html＃customizing_object_construction_using_create – 2013-03-18 20:09:01

我試圖避免解決方案，我必須手動調出每一個字段。有很多，我不想在代碼中列出它們。但是，也許沒有辦法解決這個問題。 – 2013-03-18 20:10:24

使用Knockout.js綁定在窗體上顯示錯誤

回答

相關問題